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

http://www.veryhuo.com 烈火学院 2010-11-06 投递稿件

　　同一个页面实现多个倒计时的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=<a href='http://www.veryhuo.com/z/javaxz/' target='_blank'><b>Java</b></a>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>
提示：可修改后代码再运行!

上一篇：JavaScript判断是否是正确的日期格式
下一篇：网页动态显示的数字时钟，可以作为背景使用

相关阅读

17-06-07人生日历的倒计时功能在哪打开?
15-08-20js加载图片获取图片尺寸信息
14-12-04headroom.js有什么用 headroom.js用法
13-08-25分享Webstorm手动汉化方法
13-07-18JavaScript中变量声明有var和没var的区别
13-03-20异步顺序加载 JavaScript 脚本队列
13-03-10location.href和location.replace处理跳转的
13-01-24在ASP.Net页尾添加JavaScript的最佳方法
12-10-09JavaScript获取鼠标点击位置坐标的方法
12-09-29Object.prototype.toString.call() 区分对象
12-09-28JavaScript中string xml互相转换代码
12-09-23译文：JavaScript:void 运算符
12-09-21ExtJs与JavaScript的call方法
12-09-20js将数字转换成中文字符的实例代码
12-09-12JavaScript+CSS多级树形展开菜单的代码

网友评论

栏目导航

本类年榜本类月榜

推荐软件

推荐阅读相关下载

关于我们 | 联系方式 | 广告服务 | 站内搜索 | 网站合作 | 免责声明 | 网站地图 | 反馈意见 | 回到顶部