1

Preciso de um contador regressivo porém como meus conhecimentos ainda são mais tímidos em js, nesse código não sei como adiciono o "0" nos campos hora, minutos e segundos.

Como está me retorna somente números cheios (ex.: 0 : 1 : 7). Em math.floor como adiciono mais casas decimais?

Código:

// Set the date we're counting down to
var countDownDate = new Date("Mar 21, 2017 16:35: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);
    
    // Output the result in an element with id="demo"
    document.getElementById("cont").innerHTML = days + " dias " + hours + " : "
    + minutes + " : " + seconds;
    
    // Output the result in an element with id="demo2"
    document.getElementById("cont2").innerHTML = " HRS " + " MIN " + " SEG ";
    
    // If the count down is over, write some text 
    if (distance < 0) {
        clearInterval(x);
        document.getElementById("cont").innerHTML = "TEMPO EXPIRADA";
    }
}, 1000);
#cont {
  text-align: center;
  font-size: 25px;
  font-family: "Oswald", Arial, sans-serif;
}
#cont2 {
  text-align: center;
  font-size: 15px;
  font-family: "Oswald", Arial, sans-serif;
}
<p id="cont"></p>
<p id="cont2"></p>

2
  • Desculpe a intromissão no código, mas removi o elemento p1 que você criou e adicionei o css aos ids dos elementos 21/03/2017 às 20:07
  • Modifiquei a resposta inserindo o momento em que o tempo expirou. 21/03/2017 às 20:34

1 Resposta 1

0

Uma forma simples de resolver seu problema seria colocar algo como

days = days < 10 ? "0" + days : days;
hours = hours< 10 ? "0" + hours : hours;
minutes = minutes < 10 ? "0" + minutes : minutes;
seconds = seconds < 10 ? "0" + seconds : seconds;

Então ficaria assim:

// Set the date we're counting down to
    var date = new Date("Mar 23, 2017 18:00:00");
    var countDownDate = date.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));

        // If the count down is over, write some text 
        if (distance < 0) {
            document.getElementById("cont").innerHTML = "TEMPO EXPIRADO";
            clearInterval(x);
            
            var year = date.getFullYear();
            var month = date.getMonth()+1;
            var day = date.getDay()+1;
            hours = date.getHours();
            minutes = date.getMinutes() ;
            seconds = date.getSeconds();
            
            year = year <= 9 ? "0" + year : year;
            month = month <= 9 ? "0" + month : month;
            day = day <= 9 ? "0" + day : day;
            hours = hours <= 9 ? "0" + hours : hours;
            minutes = minutes <= 9 ? "0" + minutes : minutes;
            seconds = seconds <= 9 ? "0" + seconds : seconds;

            // Output the result in an element with id="demo2"
            document.getElementById("cont2").innerHTML = day + "/" + month + "/" + year + " " + hours + ":" + minutes + ":" + seconds;
        } else {
            days = days <= 9 ? "0" + days : days;
            days = days == 1 ? days + " dia " : days + " dias ";
            hours = hours <= 9 ? "0" + hours : hours;
            minutes = minutes <= 9 ? "0" + minutes : minutes;
            seconds = seconds <= 9 ? "0" + seconds : seconds;
        
            // Output the result in an element with id="demo"
            document.getElementById("cont").innerHTML = days + hours + ":"
            + minutes + ":" + seconds;
        }
    }, 1000);
#cont {
  text-align: center;
  font-size: 25px;
  font-family: "Oswald", Arial, sans-serif;
}
#cont2 {
  text-align: center;
  font-size: 15px;
  font-family: "Oswald", Arial, sans-serif;
}
<p id="cont"></p>
<p id="cont2"></p>

Inseri um -1* no cálculo, para que sejam mostrado valores positivos no tempo.

5
  • Perfeito! Mas algo que acontece é o meu texto abaixo do contador aparece alinhado a esquerda mesmo eu definindo 'center' no elemento '#cont2'. Como consigo forçar o alinhamento?
    – Panos150
    21/03/2017 às 20:05
  • porque você criou um elemento chamado p1 que não existe no HTML, então vc teria que definir todas as propriedades deste elemento para que ele funcionasse perfeitamente, como existe um id no seu elemento, use-o, vai facilitar inclusive a leitura do seu código, fiz edições no meu código agora, está 100% funcional. 21/03/2017 às 20:06
  • Entendi. Consegui centralizar. Desculpe abusar, mas uma coisa é que preciso do contador 24hrs. No meu código se aumento a range da data ele exibe os dias e as horas baseando na minha data atual e não usando o padrão de 24 horas. No output cont eu removi a contagem de dias.
    – Panos150
    21/03/2017 às 20:22
  • Você quer exibir a hora que expirou e não Há quanto tempo expirou é isso? 21/03/2017 às 20:26
  • Na verdade preciso exibir assim: se o contador expira amanhã às 18:00, exibo 24:00:00 e contando em regressiva.
    – Panos150
    21/03/2017 às 20:43

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 .