Calculation of tenths of a second

Question

I’m making a "Countdown" stopwatch that counts the time remaining to get to a certain date (in case 30 November). I pass this information on; days, hours, minutes and seconds.

The thing is, I wanted to show off 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? Besides the calculation, I will need to change the set time out?

Answer 1

You don’t get all that precision in every browser and every computer, and not only that, the human can’t even tell the decimals right by changing. To tell the truth, most regressive time counters should stop up to minutes, or at least give more accuracy as the final moment arrives, so it should only show seconds probably in the last(s) minute(s). The tenths always make little sense, but if it is to use it would only be in the last (10) seconds, if you want to pass too much sense of urgency, if the user really needs it and if he really will be there waiting, and still probably the UI should stop showing days and maybe even hours.

I can’t imagine why dividing by 1010 would help at all. 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 interval of setInterval() to 100 so that it is invoked every 100 milliseconds, ie 1 tenth, otherwise it will show the tenths only every second.

If you want to insist can do, but depending on a number of technical issues will not be shown a few tenths, it is possible to shorten the interval to try to reduce these jumps, but it can slow down too.

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>

I put in the Github for future reference.

Answer 2

As the return of the method Date.getTime() is in milliseconds just you take the rest of the split 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 changed code:

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 the document.getElementById() from within the setInterval() to improve performance, since access to the DOM has a high computational cost. I also changed the HTML structure to only mess with text nodes without changing the structure in Interval.