当前位置: 代码迷 >> Web前端 >> 简易的记时程序
  详细解决方案

简易的记时程序

热度:113   发布时间:2012-10-07 17:28:51.0
简易的倒计时程序
要求:
在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>




  相关解决方案