Calculation of countdown timer

How numerators and denominators of days, hours and minutes are calculated in this code, why modulus is calculated in numerator?

    var countDownDate = new Date("Sep 5, 2018 15:37:25").getTime();

    var x = setInterval(function() {  
        var now = new Date().getTime();      
        var distance = countDownDate - now;      
        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);

        document.getElementById("demo").innerHTML = days + "d " + hours + "h " + minutes + "m " + seconds + "s ";

       if (distance < 0) {
          clearInterval(x);
          document.getElementById("demo").innerHTML = "EXPIRED";
       }

    }, 1000);

Solution

Let me explain it line by line:

var countDownDate = new Date("Sep 5, 2018 15:37:25").getTime();

In the above line, you are getting the milliseconds for the date Sep 5, 2018 15:37:25 from Jan 1, 1970 (which is the reference date being used by getTime()

var now = new Date().getTime();      
var distance = countDownDate - now;

The above two lines are simple. now gets the current time in milliseconds and distance is the difference between the two times (also in milliseconds)

var days = Math.floor(distance / (1000 * 60 * 60 * 24));

The total number of seconds in a day is 60 * 60 * 24 and if we want to get the milliseconds, we need to multiply it by 1000 so the number 1000 * 60 * 60 * 24 is the total number of milliseconds in a day. Dividing the difference (distance) by this number and discarding the values after the decimal, we get the number of days.

var hours = Math.floor((distance % (1000 * 60 * 60 * 24)) / (1000 * 60 * 60));

The above line is a little tricker as there are two operations. The first operation (%) is used to basically discard the part of the difference representing days (% returns the remainder of the division so the days portion of the difference is taken out. In the next step (division), 1000 * 60 * 60 is the total number of milliseconds in an hour. So dividing the remainder of the difference by this number will give us the number of hours (and like before we discard the numbers after decimal)

var minutes = Math.floor((distance % (1000 * 60 * 60)) / (1000 * 60));

This is similar to how hours are calculated. The first operation (%) takes out the hours portion from difference and the division (1000*60) returns the minutes (as 1000 * 60 is the number of milliseconds in a minute)

var seconds = Math.floor((distance % (1000 * 60)) / 1000);

Here the first operation (%) takes out the minutes part and the second operation (division) returns the number of seconds.

Note: You might have noticed that in every operation the original distance is used but the code still works fine. Let me give you an example (I am using difference instead of distance as this name makes more sense).

difference = 93234543
days =  Math.floor(89234543 / (1000 * 60 * 60 * 24)) 
=> days = 1
hours = Math.floor((89234543 % (1000 * 60 * 60 * 24)) / (1000 * 60 * 60));
(result of modulus operation is 6834543, and division is )
=> hours = 1

This is a very important operation to understand:
var minutes = Math.floor((distance % (1000 * 60 * 60)) / (1000 * 60));

distance(difference) / (1000 * 60 * 60) returns 25 (hours). As you can see we have already got 1 day and 1 hour (25 hours) so distance % (1000 * 60 * 60) wipes out all of these 25 hours and then the division calculates the minutes and so on.