Calculation of tenths of a second

Question

Calculation of tenths of a second

Navigation

#1 by (7 votes)
#2 by (6 votes)

1

I'm doing a "countdown" timer that counts the time it takes to get to a certain date (in the case November 30). I pass this information on; days, hours, minutes, and seconds.

The case is that I wanted to display the tenths of seconds.

 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>

In case I would have to divide by 1010 instead of 1000? In addition to the calculation, will I need to change the set time out?

javascript

asked by anonymous 31.10.2018 / 12:53

2 answers

7

You do not get this precision all over the browser and every computer, and not only that, the human can not even differentiate the tenths right by changing. To tell you the truth, most of the time countdown timers should stop until minutes, or at least give more precision as the final time comes, so you should only show seconds probably in the last minute (s). The tenths always make little sense, but if it's to use it would only be in the last 10 seconds if you want to get past the sense of urgency, if the user really needs it and if he really will be there waiting, and even then probably the UI should stop showing days and maybe even hours.

I can not imagine why dividing by 1010 would help anything. But dividing by 100 instead of 1000 makes sense. Also multiply by 10 instead of 1000 to give only 1 digit.

You have to change the range from setInterval() to 100 so that it is invoked every 100 milliseconds, ie 1 tenth, otherwise it will display the tenths only every second.

If you want to insist, you can do it, but depending on a series of technical questions, you will not see a few tenths, you can shorten the interval to try to reduce those jumps, but you can leave it too slow.

 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>

31.10.2018 / 12:57

Meta author does not incorporate when sharing on Facebook Wait for x seconds and show a submit

score 6 · Accepted Answer

Since the method return Date.getTime() is in milliseconds you would just take the remainder of the division by 1000 and convert calculated thousandths to tenths.

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

Your code changed:

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>

I removed all document.getElementById() from within setInterval() to improve performance, since DOM access has a high computational cost. I also changed the HTML structure to only work with text nodes without changing the structure in Interval.