1

Tenho uma página com uma contagem regressiva. Onde irá mostrar o tempo que falta para determinada coisa. Está funcionando perfeitamente. Porém, eu gostaria de incluir mais uma variável. No caso o mês. Ou seja, antes do tempo normal que é mostrado hoje em dia, gostaria de incluir quantos dias faltam para determinada coisa.

var countDownDate = new Date("Sep 26, 2017    23:00:00").getTime();

// Update the count down every 1 second
var x = setInterval(function() {

  // Get todays date and time
  var now = new Date().getTime();

  // Find the distance between now an the count down date
  var distance = countDownDate - now;

  // Time calculations for days, hours, minutes and seconds
  var days = Math.floor(distance / (1000 * 60 * 60 * 24));
  var hours = Math.floor((distance % (1000 * 60 * 60 * 24)) / (1000 * 60 * 60));
  var minutes = Math.floor((distance % (1000 * 60 * 60)) / (1000 * 60));
  var seconds = Math.floor((distance % (1000 * 60)) / 1000);

  // Display the result in the element with id="demo"
  document.getElementById("demo").innerHTML = hours + "h " +
    minutes + "m " + seconds + "s ";

  // If the count down is finished, write some text
  if (distance < 0) {
    clearInterval(x);
    document.getElementById("demo").innerHTML = "<a href='https://www.youtube.com/watch?v=5VhQubIDiRk'>Clica aqui</a><br>Espero que goste.";
  }
}, 1000);
<h1></h1>
<!-- YOUR TITLE HERE -->
<!-- Display the countdown timer in an element -->
<div class="text">Contagem regressiva para a segunda temporada</div>
<p id="demo"></p>
<div class="message">teste</div>

3 Respostas 3

3

Ué, esse código já faz praticamente isso. Precisa mudar muito pouco:

var months = Math.floor(distance / (1000 * 60 * 60 * 24 * 30)); // veja o * 30
var days = Math.floor(distance / (1000 * 60 * 60 * 24));
...
document.getElementById("demo").innerHTML = months + "m " + days + "d " + hours + "h " +
minutes + "m " + seconds + "s ";    

var countDownDate = new Date("Sep 26, 2017    23:00:00").getTime();

// Update the count down every 1 second
var x = setInterval(function() {

  // Get todays date and time
  var now = new Date().getTime();

  // Find the distance between now an the count down date
  var distance = countDownDate - now;

  // Time calculations for days, hours, minutes and seconds
  var months = Math.floor(distance / (1000 * 60 * 60 * 24 * 30));
  var days = Math.floor(distance / (1000 * 60 * 60 * 24));
  var hours = Math.floor((distance % (1000 * 60 * 60 * 24)) / (1000 * 60 * 60));
  var minutes = Math.floor((distance % (1000 * 60 * 60)) / (1000 * 60));
  var seconds = Math.floor((distance % (1000 * 60)) / 1000);

  // Display the result in the element with id="demo"
  document.getElementById("demo").innerHTML = months + "m " + days + "d " + hours + "h " +
    minutes + "m " + seconds + "s ";

  // If the count down is finished, write some text
  if (distance < 0) {
    clearInterval(x);
    document.getElementById("demo").innerHTML = "<a href='https://www.youtube.com/watch?v=5VhQubIDiRk'>Clica aqui</a><br>Espero que goste.";
  }
}, 1000);
<h1></h1>
<!-- YOUR TITLE HERE -->
<!-- Display the countdown timer in an element -->
<div class="text">Contagem regressiva para a segunda temporada</div>
<p id="demo"></p>
<div class="message">teste</div>

2
  • só falta mudar a data para poder mostrar o resultado var countDownDate = new Date("Sep 26, 2018 23:00:00").getTime();
    – NoobSaibot
    Commented 26/09/2017 às 23:01
  • O months não é necessário Commented 26/09/2017 às 23:21
2

Fala Felipe, tudo bem? Sugiro que você utilize o momentjs - além dele tratar as diferenças entre datas para você, você ainda terá a vantagem de não se preocupar em dar manutenção num algoritmo que pode levá-lo a complexidades tais como anos bissextos e meses com total de dias maior ou menor do que 30

Exemplo:

var getCountDownBetween = function(from, to) {
  // Find the distance between now an the count down date
  var distance = moment.duration(to.diff(from));

  // Time calculations for days, hours, minutes and seconds
  return {
    months: distance.months(),
    days: distance.days(),
    hours: distance.hours(),
    minutes: distance.minutes(),
    seconds: distance.seconds(),
    toString: function() {
      return this.months + 'mo '    
        + this.days + "d " 
        + this.hours + "h " 
        + this.minutes + "m " 
        + this.seconds + "s ";
    }
  };
}

//Tests

getCountDownBetween(moment(), moment());            //0mo 0d 0h 0m 0s

getCountDownBetween(moment('2017-09-06T16:33:09'),
                    moment('2017-09-20T23:52:33')); //0mo 14d 7h 19m 24s

getCountDownBetween(moment('2017-01-01T20:09:09'),
                    moment('2017-07-11T00:51:00')); //6mo 7d 5h 41m 51s 

Segue exemplo no JSFiddle: https://jsfiddle.net/wellington362/fffaseyv/6/

Espero ter ajudado. Abraços

1

Se vc usar um script pronto em jquery para contadores não ajuda??

Da uma olhada nesse aqui:

http://keith-wood.name/countdown.html

Ai vc pode chamar ele assim:

$('#byMonth').countdown({until: longWayOff, format: 'odHM'});

Desse modo ja faz a contagem do jeito q vc deseja e de um modo mais fácil sem precisar se preocupar com os calculos.

Você deve fazer log-in para responder a esta pergunta.

Esta não é a resposta que você está procurando? Pesquise outras perguntas com a tag .