The Modulus

You've already learned how to compare two dates and use division and rounding to find the number of days between two dates. In this lesson, we'll be learning how to use even more math and JavaScript to figure out the number of hours, minutes, and seconds between Date()s. Don't get scared, the math is pretty easy if you're familiar with division.

The idea goes like this: Remember when we did the division for days, there was a remainder we had to round? That was because there were more milliseconds than could be evenly divided to make days. This remainder represents a "partial day", or hours, minutes, and seconds.

We can process this remainder to extract the number of hours, minutes, and seconds. Here's an example. Wait a few seconds, reload the page, and you'll see that you're a few seconds closer to (or away from) Christmas, 2004.

To get the milliseconds remaining after division for days we use the "modulus". This mathematical operation works a lot like division except a percentage sign (%) is used instead of division's slash (/). It returns the remainder.

Here are some modulus examples:

10/3 = 3.3333...
10%3 = 1

8/2 = 4
8%2 = 0

The first example divides 10 by 3. We know that 3 will go into 10 three times with 1 remaining. Using modulus (10%3) we can get this remainder directly. There is no remainder when 8 is divided by 2, so the modulus is zero.

Getting Hours

Lets use the modulus to get the remainder of milliseconds left in our Christmas Date() comparison after we've calculated for days. First we need to get the number of milliseconds left over from the "days" division.

Remember that we used the variable "difference" to hold the number of milliseconds between the current date and Christmas,2004.

divisor_for_hours = difference%(1000*60*60*24);

This looks a lot like the division we used for "days" in our previous tutorial. It is, except now we're using the modulus to find the remainder instead of division to find the number of days.

This gives us the number of oddball milliseconds that don't make up an even day. This is stored in a variable I called "divisor_for_hours" because we're about to use this remainder to calculate the number of hours, after "days" has been calculated, until Christmas, 2004.

Now we can can figure the number of hours remaining after the number of days has been calculated.

divisor_for_hours = difference%(1000*60*60*24);

hours = Math.round(divisor_for_hours / (1000 * 60 * 60));

First, notice that we divided by (1000 * 60 * 60). This is the number of milliseconds in an hour. Secondly, keep in mind that we want the number of hours after whole days has been calculated. If we just divided "difference" by (1000 * 60 * 60) we would've ended up with the total number of hours between the current date and Christmas, 2004.

This isn't what we want. We only want the number of hours after the number of days has been accounted for. This is why we use the remainder (modulus) instead of the overall difference between the Date()s.

This is all put in a "Math.round()" because we'll be displaying "hours" later and only want whole integers.

Getting Minutes & Seconds

Getting minutes and seconds is similar to getting hours. We get the remainder from the previous calculation and then divide to come up with our answer.

To get minutes we'd use:

divisor_for_minutes = divisor_for_hours % (1000 * 60 * 60);

minutes = Math.round(divisor_for_minutes / (1000 * 60));

Notice that we just got the remainder from the division we did for "hours". This gives us the number of milliseconds left over after both days and hours have been calculated. Next, we divided this remainder by (1000 * 60), or the number of milliseconds in a minute and stored it in a variable I called "minutes".

Seconds are calculated similarly. We take the remainder of the "minutes" formula above and divide by 1000.

divisor_for_seconds = divisor_for_minutes % (1000 * 60);

seconds = Math.round(divisor_for_seconds / 1000);

Remember that there are 1000 milliseconds in a second.

Making The Display

Now we have variables containing the number of hours, minutes, and seconds between the current date and midnight Christmas, 2004. All we have to do is write "document.write()" to display them.

I broke this down into two parts. First I made a variable to hold the string to display:

until_xmas = "<h1 align=\"center\">" + xmasday + " days " + hours + " hours " + minutes + " minutes " + seconds + " seconds<br><br>Until Christmas!<\/h1>"

This is a pretty long string using the variables we've created. You can break this down and use more variables than a single "until_xmas" one.

Now all you have to do is put a "document.write(until_xmas);" in your <body> between <script> tags and you'll be finished with a page like our example.

Times Other Than Midnight

Using the Date() objects from the previous lesson, we were comparing times from midnight (00:00:00) Christmas, 2004. How can we make a comparison for a time other than midnight? For example, say we want to use 9:40 AM instead of midnight.

To use another time, we change the syntax in the parameter of our date object. Here's what we'd do to make the Christmas Date() object reflect the 9:40 AM time:

Christmas = new Date(2004, 11, 25, 9, 40, 0);

This is quite a change from the American formatting we've been using -- "December 25, 2004". Actually, this formatting is not only detailed, but more logical and universal.

The first number is the year. The second entry is the month (remember that months begin with 0=January). Next come day, hours, minutes, and seconds. Here's a generic example:

object_name = new Date(year, month, day, hours, minutes, seconds);

Keep this parameter format in mind any time you're using any time other than midnight. The parameter entries are separated by commas. You can also add a space after the commas if you'd like.

Summary & Exercises

The big key to this exercise is the modulus. This math process gives us the remainder from a division process. We can use this to keep breaking down a time into component hours, minutes, and seconds.

It helps to check your work with each stage of division to see if your answer is correct. You can code temporary "alert()" boxes to display your step by step values.

This is a handy debugging skill to know. It also helps to use a nearby date instead of Christmas, 2004, to check your calculations. You can remove the "alert()" boxes and reset the date to Christmas, 2004 when you're calculations are working correctly.

When a time other than midnight is being used in a comparison, use the syntax of "new Date(year, month, day, hours, minutes, seconds);".

Try adding milliseconds to the example. Next, try using other dates and see how accurate your calculations are. They should be accurate to the time the page is loaded.

Try comparing the current time to past dates and note the negative signs. Try to figure out some error control to catch when an event has past. Hint: use IF (time_variable < 0)... to detect negative numbers. Now you need to determine when the event is "past". Will you use seconds? Hours? Days? It's your choice.

To Next Advanced JavaScript Lesson

Back To Advanced JavaScript Index