Javascript Countdown Timer

Need a stylish Javascript countdown timer? No problem. Here’s a quick and dirty way to get one up that’s clean and usable. Check out the demo to see it in action.

To install:

Add the following HTML snippet to the section of your page where you want the timer to be placed

<div id="counter" class="counter">
	<ul class="countdown">
		<li><div class="countdown_num" id="countdown_day"></div><div>Days</div></li>
		<li><div class="countdown_num" id="countdown_hour"></div><div>Hours</div></li>
		<li><div class="countdown_num" id="countdown_min"></div><div>Minutes</div></li>
		<li><div class="countdown_num" id="countdown_sec"></div><div>Seconds</div></li>
	</ul>
</div>
<div id="expired" style="display:none;">
	The deadline has passed.
</div>

Next, add the following CSS to give it some style!

/*COUNTER SPECIFIC STYLES */
.counter{
	width: 610px;
}
.counter ul.countdown{
	list-style-type: none;
	color: white;
	font-weight: bold;
	text-align: center;
}
.counter ul.countdown li{
	float: left;
	background: url(digit.png) no-repeat;
	height:110px;
	width: 105px;
	padding-top: 15px;
}
.counter ul.countdown li div{
	font-size: 15px;
}
.counter ul.countdown li div.countdown_num{
	font-size: 48px;
}
.counter ul.countdown li.no_countdown{
	padding-top:4px;
	background:transparent;
	height:110px;
	width:180px;
}

Finally, here’s the Javascript to make it work. Just add this script to the bottom of your page.

<script type="text/javascript">
         /*
		Countdown Timer
		Based on the "Count down until any date script" - By JavaScript Kit (www.javascriptkit.com)
		Author: (c) 2009 Elbert Bautista
		URL: http://www.egTheBlog.com
		Licence : Open Source MIT Licence
 
	*/
 
	var current="Expired"
	var montharray=new Array("Jan","Feb","Mar","Apr","May","Jun","Jul","Aug","Sep","Oct","Nov","Dec")
 
	function countdown(yr,m,d){
		theyear=yr;themonth=m;theday=d
		var today=new Date()
		var todayy=today.getYear()
		if (todayy < 1000)
		todayy+=1900
		var todaym=today.getMonth()
		var todayd=today.getDate()
		var todayh=today.getHours()
		var todaymin=today.getMinutes()
		var todaysec=today.getSeconds()
		var todaystring=montharray[todaym]+" "+todayd+", "+todayy+" "+todayh+":"+todaymin+":"+todaysec
		futurestring=montharray[m-1]+" "+d+", "+yr
		dd=Date.parse(futurestring)-Date.parse(todaystring)
		dday=Math.floor(dd/(60*60*1000*24)*1)
		dhour=Math.floor((dd%(60*60*1000*24))/(60*60*1000)*1)
		dmin=Math.floor(((dd%(60*60*1000*24))%(60*60*1000))/(60*1000)*1)
		dsec=Math.floor((((dd%(60*60*1000*24))%(60*60*1000))%(60*1000))/1000*1)
		if(dday==0&&dhour==0&&dmin==0&&dsec==1){
			document.getElementById('counter').style.display='none';
			document.getElementById('expired').style.display='block';
			return
		}
		else{
			document.getElementById('countdown_day').innerHTML=dday;
			document.getElementById('countdown_hour').innerHTML=dhour;
			document.getElementById('countdown_min').innerHTML=dmin;
			document.getElementById('countdown_sec').innerHTML=dsec;
			setTimeout("countdown(theyear,themonth,theday)",1000)
		}
	}
 
        // THIS IS JUST TEST DATA FOR THE EXAMPLE, REMOVE
	var deadline=new Date();
	deadline.setDate(deadline.getDate()+5);
	var deadlineYear = deadline.getYear();
	if (deadlineYear < 1000)
	deadlineYear+=1900
        // ---------------------------
 
 
	//MODIFY THIS LINE: enter the count down date using the format year/month/day
        //e.g. countdown(2009, 03, 23);
	countdown(deadlineYear, deadline.getMonth()+1, deadline.getDate());
</script>

That’s it! Check out the final demo here.

Tags: , ,

2 Responses to “Javascript Countdown Timer”

  1. Ryan Says:
    June 12th, 2009 at 3:41 am

    Hi man, thanks for the script, it’s great. What would I need to change to countdown to an exact hour though? Thanks again.

  2. Constantin Says:
    June 13th, 2009 at 12:22 pm

    Thanks for this great script. The demo looks really nice.

    Is the digit.png graphic free to use, too?

Leave a Reply