同一个页面实现多个倒计时的JS代码。一般情况下,我们是用不着的,但是万里有一,也许有一天我们会用到,所以还是要学习一下,哪怕收藏也好。
以下特效通过javascript实现。
演示特效:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <title>倒计时</title> </head> <script language=JavaScript> var endtimes=new Array();//结束时间 endtimes[0]="4/6/2010 9:03:00"; endtimes[1]="4/6/2010 9:04:20"; endtimes[2]="4/8/2010 9:05:00"; endtimes[3]="4/9/2010 9:05:00"; var nowtimes; function givetime(){ nowtimes=new Date("4/6/2010 9:03:00");//当前服务器时间 window.setTimeout("DownCount()",1000) } function DownCount(){ nowtimes=Number(nowtimes)+1000; for(var i=0;i<=3;i++) { var theDay=new Date(endtimes[i]); theDay=theDay++; if(theDay<=nowtimes) { document.getElementById("times"+i).innerHTML = "00小时,00分钟,00秒"; } else{ timechange(theDay,i); } } window.setTimeout("DownCount()",1000) } function timechange(theDay,i){ var theDays=new Date(theDay); var seconds = (theDays - nowtimes)/1000; var minutes = Math.floor(seconds/60); var hours = Math.floor(minutes/60); var days = Math.floor(hours/24); var CDay= days; var CHour= hours % 24; var CMinute= minutes % 60; var CSecond= seconds % 60; var CHour=CHour+CDay*24; if(CMinute<10) { CMinute="0"+CMinute; } if(CHour<10) { CHour="0"+CHour; } if(CSecond<10) { CSecond="0"+CSecond; } document.getElementById("times"+i).innerHTML = CHour + "小时," + CMinute + "分钟," + CSecond + "秒"; } </script> <BODY onload="givetime()"> <table border="0" cellSpacing="0" cellPadding="0" width="100%" align="center" style="font-size:9pt"> <tr><td align="center"> 距亚运会开幕还有:<div id="times0"></div> <div id="times1"></div> <div id="times2"></div> <div id="times3"></div> </td></tr> </table> </body> </html><br /><center>如不能显示效果,请按Ctrl+F5刷新本页,更多网页代码:<a href='http://www.veryhuo.com/' target='_blank'>http://www.veryhuo.com/</a></center>提示:可修改后代码再运行!