»
Tiếng AnhTiếng PhápTiếng Việt

In - Bộ đếm thời gian giảm dần đẹp tuyệt vời - JavaScriptBank.com

Phiên bản đầy đủ: jsB@nk » Thời gian » Bộ đếm » Bộ đếm thời gian giảm dần đẹp tuyệt vời
URL: https://www.javascriptbank.com/super-neat-javascript-countdown-timer.html

Bộ đếm thời gian giảm dần đẹp tuyệt vời © JavaScriptBank.comBạn đang cần một bộ đếm thời gian với giao diện hấp dẫn và bắt mắt cho web của mình? Và nó cũng phải đơn giản để sử dụng & chỉnh sửa? Hãy xem ví dụ này ngay để quyết định; bộ đếm thời gian giảm dần này đáp ứng đầy đủ các nhu cầu của bạn, và có lẽ sẽ là bộ đếm tốt nhất mà bạn từng dùng.

Phiên bản đầy đủ: jsB@nk » Thời gian » Bộ đếm » Bộ đếm thời gian giảm dần đẹp tuyệt vời
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