Javascript Countdown Timer
Posted by e. | Filed under JavaScript
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: countdown, JavaScript, timer
2 Responses to “Javascript Countdown Timer”
-
Ryan Says:
June 12th, 2009 at 3:41 amHi man, thanks for the script, it’s great. What would I need to change to countdown to an exact hour though? Thanks again.
-
Constantin Says:
June 13th, 2009 at 12:22 pmThanks for this great script. The demo looks really nice.
Is the digit.png graphic free to use, too?