»
EnglishFrenchVietnamese

Print - Super Neat JavaScript Countdown Timer - JavaScriptBank.com

Full version: jsB@nk » Time » Counter » Super Neat JavaScript Countdown Timer
URL: https://www.javascriptbank.com/super-neat-javascript-countdown-timer.html

Super Neat JavaScript Countdown Timer © JavaScriptBank.comYou are needing a beautiful/stylish Javascript countdown timer? And it must be easy to use & edit? Check out this JavaScript code now to see it in action. It meets your requirements, and maybe the best JavaScript countdown timer you ever use.

Full version: jsB@nk » Time » Counter » Super Neat JavaScript Countdown Timer
URL: https://www.javascriptbank.com/super-neat-javascript-countdown-timer.html



CSS
<style type="text/css">html { background:#222; height:100%;}body { font:normal 76% verdana,tahoma,arial;color:#fff;}a { color:#99ffff;}a:hover { color:#ffff00;}h1, h2 { font:normal 1em georgia,helvetica,arial; letter-spacing:-0.5px; /* it isn't web 2.0 otherwise, right? ;) */}p { margin:0.5em 0px 1.25em 0px; padding:0px; line-height:1.7em;}/*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;}</style>


HTML
<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><script type="text/javascript">/*Countdown TimerBased on the "Count down until any date script" - By JavaScript Kit (www.javascriptkit.com)Author: (c) 2009 Elbert BautistaURL: http://www.egTheBlog.comLicence : 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=dvar today=new Date()var todayy=today.getYear()if (todayy < 1000)todayy+=1900var 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+":"+todaysecfuturestring=montharray[m-1]+" "+d+", "+yrdd=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)}}var deadline=new Date();deadline.setDate(deadline.getDate()+5);var deadlineYear = deadline.getYear();if (deadlineYear < 1000)deadlineYear+=1900//enter the count down date using the format year/month/daycountdown(deadlineYear, deadline.getMonth()+1, deadline.getDate());</script>


Files
/javascript/time/Super_Neat_JavaScript_Countdown_Timer/digit.png