Javascript Count Down Timer & Clock

I had a little but of down time at work the other day, so I thought it might be fun to build a javascript timer. All these javascript timers work the same way. You pass a future date to javascript, subtract it from the current date, and reduce the result down to seconds. Then, using various mathematical formulas, you parse the information further until you get your desired output.

I know that there are TONS of timers scripts out there on the interwebs, but I wanted to make a basic one and "plus it", that is, give do something extra with it. Here is how I did it.

In tribute to one of my all time favorite TV show, I've decided I wanted my count down to exists in a "24" digital clock style. Because of the difference between fonts and how some browser have them, and some don't, I opted to use images, rather than plain text, as my output so I could have pixel perfect control. They weren't hard to find, though if you want them, I'll save you the trouble...

Thanks Bing! Next I set the stage with some raw HTML.

	<div style="background-color:#000; width:300px;">
	  <img src="imgs/digits/digital_blank.png" width="25" height="50" id="count_down_days_hundreds_column" />
	  <img src="imgs/digits/digital_blank.png" width="25" height="50" id="count_down_days_tens_column" />
	  <img src="imgs/digits/digital_blank.png" width="25" height="50" id="count_down_days_ones_column" />
		<img src="imgs/digits/digital_colon.png" width="10" height="50" />
		<img src="imgs/digits/digital_blank.png" width="25" height="50" id="count_down_hours_tens_column" />
	  <img src="imgs/digits/digital_blank.png" width="25" height="50" id="count_down_hours_ones_column" />
	  <img src="imgs/digits/digital_colon.png" width="10" height="50" />
  	<img src="imgs/digits/digital_blank.png" width="25" height="50" id="count_down_minutes_tens_column" />
	  <img src="imgs/digits/digital_blank.png" width="25" height="50" id="count_down_minutes_ones_column" />
	  <img src="imgs/digits/digital_colon.png" width="10" height="50" />
	  <img src="imgs/digits/digital_blank.png" width="25" height="50" id="count_down_seconds_tens_column" />
	  <img src="imgs/digits/digital_blank.png" width="25" height="50" id="count_down_seconds_ones_column" />
	</div>

I placed blank images as places holders and gave them appropriate IDs. As you can see from the code, I am a big fan of large IDs. When I look at an element, I like to instantly know what I'm looking at. They could have been named anything, but I chose to name them after number columns. Remember those from grade school? Ones, Tens, Hundreds, etc?

Now we add the Javascript.

function get_digit(position,seconds){
	switch(position) {

		case "seconds_tens_column" :
			return parseInt((Math.floor(seconds/1)%60)/10);
		break;

		case "seconds_ones_column" :
			return parseInt((Math.floor(seconds/1)%60)%10);
		break;

		case "minutes_tens_column" :
			return parseInt((Math.floor(seconds/60)%60)/10);
		break;

		case "minutes_ones_column" 		:
			return parseInt((Math.floor(seconds/60)%60)%10);
		break;

		case "hours_tens_column" 			:
			return parseInt((Math.floor(seconds/3600)%24)/10);
		break;

		case "hours_ones_column" 			:
			return parseInt((Math.floor(seconds/3600)%24)%10);
		break;

		case "days_ones_column" :
			return 	parseInt((Math.floor(seconds/86400)%100000)%10);
		break;

		case "days_tens_column" :
			return parseInt(((Math.floor(seconds/86400)%100000)%100)/10);
		break;

		case "days_hundreds_column" 	:
			return parseInt((Math.floor(seconds/86400)%100000)/100);
		break;
	} // end of pisition switch

} // end of function get_digit

function run_count_down_timer(){

	var right_now 				= new Date();
	var future_date 			= new Date("12/25/"+right_now.getFullYear()+" 6:00 AM");

	var date_difference 	= new Date(future_date - right_now);
	var seconds 					= Math.floor(date_difference.valueOf()/1000);

	var position_array 		= new Array();
			position_array[0] = "seconds_tens_column";
			position_array[1] = "seconds_ones_column";
			position_array[2] = "minutes_tens_column";
			position_array[3] = "minutes_ones_column";
			position_array[4]	=	"hours_tens_column";
			position_array[5] = "hours_ones_column";
			position_array[6] = "days_ones_column";
			position_array[7] = "days_tens_column";
			position_array[8] = "days_hundreds_column";

	for(var index = 0; index < position_array.length; index++){
		document.getElementById("count_down_" + position_array[index]).src = "http://www.paulhobson.com/wordpress/wp-content/uploads/2009/08/digital_" + get_digit(position_array[index],seconds) + ".png";
	}

} // end of function count down.

The script doesn't have to be written this way, but I'll point out why I did a couple things.

First off, the date we're counting down to is Christmas. Why? Cause I like getting presents. I store this date in the future_date variable. Notice also that the date I'm counting down to makes use of the .getFullYear() method to supply the date function with the current year. Using this method, as opposed to explicitly stating "2009" will ensure that as soon as the new year comes, the count down will start all over again. Be sure to use .getFullYear(), as .getYear() will return unusable information for our purposes.

var right_now = new Date();
var future_date = new Date("12/25/"+right_now.getFullYear()+" 6:00 AM");

Secondly, I'm using an array to loop through each numeric column in my raw HTML. I like structuring my functions with array loops because, so long as my elements contain appropriate IDs, I only have to change the code within the loop to affect the processing of all the elements. For example, if the paths to my images ever change, I only need to change the location in one place.

And lastly, but most importantly, is the math used to calculate the digits. The function get_digit() takes a numeric column id and the second variable as parameters and determines the appropriate formula to return a single digit for the appropriate column. This is where long names for numeric columns is nice. I can look at each case and, without referencing my HTML elements, know what formula will generate the digit for each column.

The formulas, though maybe a little confusing, should be self explanatory if you keep in mind that we are strictly parsing seconds for single digits.

All done with that, all that is left now is to execute the script.

setInterval('run_count_down_timer();', 250);

As with all other timers, you have to use the setInterval function to keep executing the script. Here I'm choosing to run the script 4 times a second. Just in case there is a browser 'slow down' for any reason, executing the scrip this often should allow it to keep up.

You can see my output here: (Days: Hours: Minutes: Seconds:)

Could this have been written better with more features and more modular control? Sure, I'm not saying this is a perfect example... even writing about it I've thought of about a half dozen ways I would improve it, but I think it's a solid place to start from when building a timer with the JavaScript date method.

This is what I do when I'm bored.