The Countdown Clock

Today, after some frustration, I needed to vent a little bit. To do this, I created a JavaScript countdown routine.

See the Pen Countdown Timer by Christopher Vachon (@liaodrake) on CodePen.

This of course leads to some interesting thinking. How do you count down to a date / time in a readable format?

ClockImage Source

How To Make A Timer

Most Languages have a means to produce a timestamp. A timestamp is the number milliseconds from a point in time (In most cases, the date is January 1 1970 UTC, though some systems and languages use a different time reference, but this is not important to this topic). Because we can generate 2 numeric timestamps, we can use simple math to find out time remaining.

var _now = new Date('2014-09-04');  
var _then = new Date('2014-09-26');  
var _remaining_time = _then - _now;  

The variable _remaining_time is now the number of milliseconds between the two dates. So now we want to parse that into useable blocks. And we do this by finding the number of milliseconds in a day, an hour, a minute, and a second.

var _dayMultiple = 86400000; // 1000ms × 60sec × 60mins  × 24hours  
var _hourMultiple = 3600000; // 1000ms × 60sec × 60mins  
var _minMultiple = 60000; // 1000ms × 60sec  
var _secMultiple = 1000; // 1000ms  

From here, we want to start finding our individual remaining time intervals.

var _timer_days = Math.floor(_remaining_time / _dayMultiple);  
_remaining_time = _remaining_time - (_timer_days * _dayMultiple);  
var _timer_hours = Math.floor(_remaining_time / _hourMultiple);  
_remaining_time = _remaining_time - (_timer_hours * _hourMultiple);  
var _timer_mins = Math.floor(_remaining_time / _minMultiple); _remaining_time = _remaining_time - (_timer_mins * _minMultiple);  
var _timer_sec = Math.floor(_remaining_time / _secMultiple);  

By subtracting the used intervals as we go, we are left with only the time that is remaining.

From there, its a simple matter of formatting the string you want to display.