读书人

简易的记时程序

发布时间: 2012-10-07 17:28:51 作者: rapoo

简易的倒计时程序
要求:
在web上实现一个倒计时程序

例如:
从现在开始到2011-5-4还有X天X时X分X秒的倒计时程序。

代码如下:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd"><html> <head>  <title> New Document </title>  <meta name="Generator" content="EditPlus">  <meta name="Author" content="">  <meta name="Keywords" content="">  <meta name="Description" content="">  <script type="text/javascript">function getNumber(){//获得当前时间var start_date  = new Date();//设置终止时间,Date的参数分别为年,月,日,时,分,秒,其中月从0开始,即0表示1月。var end_date = new Date(2011,4,3,23,59,59);//获得时间差,得到的是两个时间之间的毫秒数。var ms = end_date-start_date;//根据毫秒数算剩余的天数,Math.floor表示向下取整。var day = Math.floor(ms/(3600*24*1000));//根据毫秒数和天数算剩余的小时数。var hour = Math.floor((ms-day*24*3600*1000)/(3600*1000));//根据毫秒数、天数和小时数算剩余的分钟数。var munite = Math.floor((ms-day*24*3600*1000-hour*3600*1000)/(60*1000));//根据毫秒数、天数和小时数、分钟数算剩余的秒数。因为前面创建end_date时少加了1s,这里补回来var second = Math.floor((ms-day*24*3600*1000-hour*3600*1000-munite*60*1000)/1000)+1;//将结果显示出来var el = document.getElementById;//显示剩余天数var d = el("d");d.innerHTML=day;//显示剩余小时数var h = el("h");h.innerHTML=hour;//显示剩余分钟数var m = el("m");m.innerHTML=munite;//显示剩余秒数var s = el("s");s.innerHTML=second;}//设置每隔一秒重新显示window.onload= function show(){setInterval(getNumber,1000);}  </script> </head> <body><label >离2011-05-04还有</label><label id ="d" style="color:red"></label><label >天</label><label id ="h" style="color:green"></label><label >时</label><label id ="m" style="color:blue"></label><label >分</label><label id ="s" style="color:grey"></label><label >秒</label> </body></html>




读书人网 >Web前端

热点推荐