第三十五节 JavaScript定时器制作倒计时

 1 <!DOCTYPE html>
 2 <html lang="en">
 3 <head>
 4     <meta charset="UTF-8">
 5     <title>Document</title>
 6     <script type="text/javascript">
 7         window.onload = function(){
 8             var oDiv = document.getElementById('div1');
 9 
10             function fnclock(){
11                 // 在实际开发中，这个时间通过ajax从后台服务器传入，避免用户修改本地时间造成错误
12                 var iNow = new Date();
13                 // 未来时间：4月30日晚24点
14                 var iFutrue = new Date(2020,3,30,24,0,0);
15                 var iLeft = parseInt((iFutrue - iNow)/1000);
16                 // 剩下多少天
17                 var iDay = parseInt(iLeft/86400);
18                 // 剩下多少个小时
19                 var iHour = parseInt((iLeft%86400)/3600);
20                 var iMinute = parseInt(((iLeft%86400)%3600)/60);
21                 var iSecond = parseInt((((iLeft%86400)%3600)%60)%60);
22                 var sTr = '距秒杀还有：' + fnTime(iDay) + '天' + " " + fnTime(iHour) + ":" + fnTime(iMinute) + ':' + fnTime(iSecond);
23                 oDiv.innerHTML = sTr;
24             }
25             fnclock();
26             var temer = setInterval(fnclock,1000);
27             function fnTime(n){
28                 if (n<10) {
29                     return '0' + n;
30                 }
31                 else{
32                     return n;
33                 }
34             }
35 
36         }
37     </script>
38     <style type="text/css">
39         div{
40             width: 1000px;
41             height: 300px;
42             background-color: gold;
43             text-align: center;
44             margin: 100px auto 0;
45             font-size: 30px;
46             line-height: 300px;
47             font-family: 'Microsoft Yahei';
48             color: red;
49         }
50     </style>
51 </head>
52 <body>
53     <div id="div1"></div>
54 </body>
55 </html>