javascript 体验倒计时：距离国庆还有多长时间 

 1 <!DOCTYPE html>
 2 <html lang="en">
 3 <head>
 4     <meta charset="UTF-8">
 5     <title>Document</title>
 6     <style>
 7         div {
 8             width: 1210px;
 9             margin: 200px auto;
10             color: orange;
11             text-align: center;
12             font: 600 30px/30px "simSun";
13         }
14     </style>
15 </head>
16 <body>
17     <div></div>
18 
19     <script>
20         var div = document.getElementsByTagName("div")[0];
21         var timer = setInterval(fn,500);
22 
23         function fn(){
24             var nowtime = new Date();
25             var future = new Date("2018/10/01 10:10:10");
26             var timeSum = future.getTime() - nowtime.getTime();
27             var day = parseInt(timeSum/1000/60/60/24);
28             var hour = parseInt(timeSum/1000/60/60%24);
29             var minu = parseInt(timeSum/1000/60%60);
30             var sec = parseInt(timeSum/1000%60);
31             // var millsec = parseInt(timeSum%1000);
32 
33             day = day < 10? "0"+day:day;
34             hour = hour < 10? "0"+hour:hour;
35             minu = minu < 10? "0"+minu:minu;
36             sec = sec < 10? "0"+sec:sec;
37             // if (millsec < 10) {
38             //     millsec = "00"+millsec;
39             // }else if (millsec < 100) {
40             //     millsec = "0"+millsec;
41             // }
42 
43             if (timeSum < 0) {
44                 div.innerHTML = "距离国庆节还有00天00小时00分00秒";
45                 clearInterval(timer);
46                 return;
47             }
48             div.innerHTML = "距离国庆节还有"+day+"天"+hour+"小时"+minu+"分"+sec+"秒";
49         }
50     </script>
51 </body>
52 </html>

 

posted @ 2018-04-14 23:29  叶子玉  阅读(1509)  评论(0)  编辑  收藏  举报