js倒计时

此文记录一个倒计时效果:

 1 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
 2 <html xmlns="http://www.w3.org/1999/xhtml">
 3 <head>
 4 <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
 5 <title>倒计时</title>
 6 <style type= "text/css">  
 7             .daojishi h2  
 8             {   
 9                 font-family:Helvetica, Microsoft YaHei, Arial, sans-serif;   
10                 font-size:14px;  
11                 margin-bottom:5px;   
12                 color:#151515;  
13             }  
14             .daojishi #timer  
15             {  
16                 font-family:Helvetica, Microsoft YaHei, Arial, sans-serif;   
17                 font-size:14px;  
18                 color:#151515;  
19                 font-weight:bold;  
20             }  
21         </style>  
22 <script type="text/javascript">
23 window.onload=function(){
24     timer();
25     }
26 function timer()
27             {   var startime=new Date();//开始时间
28                 var endtime=new Date(2018, 11, 11, 9, 58, 56);//结束时间  结束时间定为:2018年11月11日9:58:56
29                 var ts=endtime.getTime()-startime.getTime(); //dateObject.getTime()dateObject 指定的日期和时间距 1970 年 1 月 1 日午夜(GMT 时间)之间的毫秒数。该方法总是结合一个 Date 对象来使用。
30                 //var ts = (new Date(2018, 11, 11, 9, 58, 56)) - (new Date());//计算剩余的毫秒数
31                 var dd = parseInt(ts / 1000 / 60 / 60 / 24, 10);//计算剩余的天数
32                 var hh = parseInt(ts / 1000 / 60 / 60 % 24, 10);  //计算剩余的小时数
33                 var mm = parseInt(ts / 1000 / 60 % 60, 10);//计算剩余的分钟数
34                 var ss = parseInt(ts / 1000 % 60, 10);//计算剩余的秒数
35                 dd = checkTime(dd);
36                 hh = checkTime(hh);
37                 mm = checkTime(mm);
38                 ss = checkTime(ss);
39                 document.getElementById("timer").innerHTML = dd + "天" + hh + "时" + mm + "分" + ss + "秒";
40                 setTimeout("timer()",1000);
41             }
42             function checkTime(i)  
43             {  
44                if (i < 10) {  
45                    i = "0" + i;  
46                 }  
47                return i;  
48             }  
49 
50 </script>
51 </head>
52 
53 <body>
54 <div class = "daojishi">  
55             <h2>剩余时间为:</h2>  
56             <div id = "timer">  
57             </div>  
58         </div>
59 </body>
60 </html>

 

郑重声明:本站内容如果来自互联网及其他传播媒体,其版权均属原媒体及文章作者所有。转载目的在于传递更多信息及用于网络分享,并不代表本站赞同其观点和对其真实性负责,也不构成任何其他建议。