2

Estou fazendo um "countdown" cronômetro que conta o tempo que falta para chegarmos a uma determinada data (no caso 30 de novembro). Passo essa informação em; dias, horas, minutos e segundos.

O caso é que eu queria exibir os décimos de segundos.

 var countDownDate = new Date("Nov 30, 2018 00:00:00").getTime();
var x = setInterval(function() {
    var now = new Date().getTime();
    var distance = countDownDate - now;
    
    //calculation getElementById("")
     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);
    //fazer o calculo de décimos   

    document.getElementById("days").innerHTML = days + "<br><small>dias</small>";
    document.getElementById("hours").innerHTML = hours + "<br><small>horas</small>";
    document.getElementById("minutes").innerHTML = minutes + "<br><small>minutos</small>";
    document.getElementById("seconds").innerHTML = seconds + "<br><small>segundos</small>";
    
}, 1000);
.clock .clock-box {
    display: inline-block;
    text-align: center;
    margin: 5px;
}  

.clock-box {
    background-color: black;
    color: lightgreen;
    border-radius: 5px;
    width: 60px;
    font-size: 10px;
}
<div class="clock">
    <div class="clock-box" id="days"></div>
    <div class="clock-box" id="hours"></div>
    <div class="clock-box" id="minutes"></div>
    <div class="clock-box" id="seconds"></div>
    <div class="clock-box" id="dSeconds"></div>
</div>

No caso eu teria que dividir por 1010 invés de 1000? Além do cálculo, eu vou precisar alterar o set time out?

4
  • 3
    Curiosidade boba... Li e reli seu post, não entendi como você chegou esse valor "1010", devo ter distraído em algum detalhe. Poderia explicar?
    – Square Obama
    31/10/2018 às 12:11
  • pq o javascript pega a data por milésimo de segundo, ai eu pensava que assim conseguiria o décimo kkkkkk mas não rolou, eu testei aqui kkkkk da um número nada a ver
    – MSHijo
    31/10/2018 às 12:21
  • MSHijo ainda não entendi direito, mas obrigado pelo retorno :D
    – Square Obama
    31/10/2018 às 12:21
  • realmente as recuperações que eu pegava em matemática na escola fazem sentido kkkkkkk
    – MSHijo
    31/10/2018 às 12:22

2 Respostas 2

8

Você não consegue essa precisão toda em todo navegador e todo computador, e não só isso, também o humano nem consegue diferenciar direito os décimos mudando. Pra falar a verdade a maioria dos contadores regressivos de tempo deveriam parar até minutos, ou pelo menos ir dando mais precisão conforme vai chegando o momento final, então só deveria mostrar segundos provavelmente no(s) último(s) minuto(s). Os décimos sempre faz pouco sentido, mas se for para usar seria só nos últimos (10) segundos, se quiser passar muito o senso de urgência, se o usuário realmente precisar disso e se ele realmente estará lá esperando, e mesmo assim provavelmente a UI deveria deixar de mostrar dias e quem sabe até horas.

Não consigo imaginar porque dividir por 1010 ajudaria em alguma coisa. Mas dividir por 100 em vez de 1000 tem sentido. Também multiplicar por 10 em vez de 1000 para dar só 1 dígito.

Tem que mudar o intervalo do setInterval() para 100 para que ele seja invocado a cada 100 milissegundos, ou seja, 1 décimo, caso contrário ele mostrará o os décimos só a cada segundo.

Se quiser insistir dá para fazer, mas dependendo de uma série de questões técnicas não serão mostrados alguns décimos, é possível diminuir o intervalo para tentar reduzir esses saltos, mas pode deixar lento demais.

var countDownDate = new Date("Nov 30, 2018 00:00:00").getTime();
var x = setInterval(function() {
var distance = countDownDate - new Date().getTime();
    document.getElementById("days").innerHTML = Math.floor(distance / (1000 * 60 * 60 * 24)) + "<br><small>dias</small>";
    document.getElementById("hours").innerHTML = Math.floor((distance % (1000 * 60 * 60 * 24)) / (1000 * 60 * 60)) + "<br><small>horas</small>";
    document.getElementById("minutes").innerHTML = Math.floor((distance % (1000 * 60 * 60)) / (1000 * 60)) + "<br><small>minutos</small>";
    document.getElementById("seconds").innerHTML = Math.floor((distance % (1000 * 60)) / 1000) + "<br><small>segundos</small>";
    document.getElementById("decimals").innerHTML = Math.floor((distance % (10 * 60)) / 100) + "<br><small>décimos</small>";                
}, 100);
.clock .clock-box {
    display: inline-block;
    text-align: center;
    margin: 5px;
}  

.clock-box {
    background-color: black;
    color: lightgreen;
    border-radius: 5px;
    width: 60px;
    font-size: 10px;
}
<div class="clock">
    <div class="clock-box" id="days"></div>
    <div class="clock-box" id="hours"></div>
    <div class="clock-box" id="minutes"></div>
    <div class="clock-box" id="seconds"></div>
    <div class="clock-box" id="decimals"></div>
</div>

Coloquei no GitHub para referência futura.

7

Como o retorno do método Date.getTime() é em milisegundos bastaria você pegar o resto de divisão por 1000 e converter milésimos calculados para décimos.

var countDownDate = new Date("Nov 30, 2018 00:00:00").getTime();
var distance = countDownDate - new Date().getTime();
var milesimos = distance % 1000;  // pega apenas os milésimos de segundo
var decimos = Math.floor(milesimos / 100); // converte milésimos para décimos

Seu código alterado:

var countDownDate = new Date("Nov 30, 2018 00:00:00").getTime();

var elemDias = document.getElementById("days");
var elemHoras = document.getElementById("hours");
var elemMinutos = document.getElementById("minutes");
var elemSegundos = document.getElementById("seconds");
var elemDecimos = document.getElementById("dSeconds");

var x = setInterval(function() {
  var distance = countDownDate - new Date().getTime();
                
  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);
  var decimos = Math.floor(distance % 1000 / 100);
  
  elemDias.innerHTML = days;
  elemHoras.innerHTML = hours;
  elemMinutos.innerHTML = minutes;
  elemSegundos.innerHTML = seconds;
  elemDecimos.innerHTML = decimos;
                
}, 100);
.clock .clock-box {
    display: inline-block;
    text-align: center;
    margin: 5px;
}  

.clock-box {
    background-color: black;
    color: lightgreen;
    border-radius: 5px;
    width: 60px;
    font-size: 10px;
}
<div class="clock">
    <div class="clock-box">
        <span id="days"></span><br>
        <small>dias</small>
    </div>
    <div class="clock-box">
        <span id="hours"></span><br>
        <small>horas</small>
    </div>
    <div class="clock-box">
        <span id="minutes"></span><br>
        <small>minutos</small>
    </div>
    <div class="clock-box">
        <span id="seconds"></span>.<span id="dSeconds"></span><br>
        <small>segundos</small>
    </div>
</div>


Removi todos os document.getElementById() de dentro do setInterval() para melhorar a performance, visto que acesso ao DOM tem um alto custo computacional. Também alterei a estrutura do HTML para mexer apenas com nodos de texto sem alterar a estrutura no Interval.

2
  • hmmm que legal, então se eu trabalhar com eles em variável fora da função, eu tenho ganho de performance? E legal a mudança no html que vc fez, faz todo o sentido, pq os valores não se alteram... brigadão !
    – MSHijo
    31/10/2018 às 13:04
  • 2
    Eu pesquiso apenas uma vez cada elemento e salvo a referência. Dentro do interval eu uso a referência. No seu código você está fazendo essa pesquisa a cada segundo, sem necessidade. É só uma dica ;) 31/10/2018 às 13:06

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 .