同一个页面实现多个倒计时的JS代码

发布时间：2018-08-16 20:36 所属栏目：121 来源：站长网

导读：同一个页面实现多个倒计时的JS代码。一般情况下，我们是用不着的，但是万里有一，也许有一天我们会用到，所以还是要学习一下，哪怕收藏也好。以下特效通过javascript实现。演示特效： !DOCTYPE html PUBLIC -//W3C//DTD XHTML 1.0 Transitional//EN http

　　同一个页面实现多个倒计时的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=<b>Java</b>Script> 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>
提示：可修改后代码再运行!

（编辑：ASP站长网）