码迷,mamicode.com
首页 > 编程语言 > 详细

javascript - 活动倒计时(天、时、分、秒)

时间:2018-08-14 11:17:07      阅读:150      评论:0      收藏:0      [点我收藏+]

标签:img   alt   port   else   分享   变量   str   ini   day   

计数时:

技术分享图片

 

 

 

结束时:

技术分享图片

 

示例:

 

 1 <!DOCTYPE html>
 2 <html lang="en">
 3 
 4 <head>
 5     <meta charset="UTF-8">
 6     <meta name="viewport" content="width=device-width, initial-scale=1.0">
 7     <meta http-equiv="X-UA-Compatible" content="ie=edge,chrome">
 8     <title>活动倒计时示例</title>
 9 </head>
10 
11 <body>
12     <div class="time">
13         <span id="day">00</span>
14         <span id="hour">00</span>
15         <span id="month">00</span>
16         <span id="second">00</span>
17     </div>
18     <script type="text/javascript">
19         (function () {
20             // 页面加载完
21             window.onload = function () {
22                 countTime();
23             }
24             // 小于9则添加前缀:01\02....
25             function checkTime(_zero) {
26                 return _zero > 9 ? _zero : 0 + _zero;
27             }
28             function countTime() {
29 
30                 // 截止时间. 年、月、日 时、分、秒 - 设置结束时间后 - 自动关闭计时器.
31                 var dateStr = "2018/8/14 08:00:00";
32 
33                 //获取当前时间  
34                 var date = new Date();
35                 var now = date.getTime();
36                 //设置截止时间  
37                 var endDate = new Date(dateStr);
38                 var end = endDate.getTime();
39                 //时间差  
40                 var leftTime = end - now;
41                 //定义变量 d,h,m,s保存倒计时的时间  
42                 var d, h, m, s;
43                 if (leftTime >= 0) {
44                     // 计天、时、分、秒
45                     d = Math.floor(leftTime / 1000 / 60 / 60 / 24);
46                     h = Math.floor(leftTime / 1000 / 60 / 60 % 24);
47                     m = Math.floor(leftTime / 1000 / 60 % 60);
48                     s = Math.floor(leftTime / 1000 % 60);
49                     //将倒计时赋值到div中  
50                     document.getElementById("day").innerHTML = d > 9 ? d +  : checkTime(d) + "";
51                     document.getElementById("hour").innerHTML = h > 9 ? h +  : checkTime(h) + "";
52                     document.getElementById("month").innerHTML = m > 9 ? m +  : checkTime(m) + "";
53                     document.getElementById("second").innerHTML = s > 9 ? s +  : checkTime(s) + "";
54                     //递归每秒调用countTime方法,显示动态时间效果  
55                     setTimeout(countTime, 1000);
56                 } else {
57                     document.getElementById("day").innerHTML = "00天";
58                     document.getElementById("hour").innerHTML = "00时";
59                     document.getElementById("month").innerHTML = "00分";
60                     document.getElementById("second").innerHTML = "00秒";
61                 }
62             }
63         })();
64 
65     </script>
66 </body>
67 
68 
69 </html>

 

javascript - 活动倒计时(天、时、分、秒)

标签:img   alt   port   else   分享   变量   str   ini   day   

原文地址:https://www.cnblogs.com/cisum/p/9472306.html

(0)
(0)
   
举报
评论 一句话评论(0
登录后才能评论!
© 2014 mamicode.com 版权所有  联系我们:gaon5@hotmail.com
迷上了代码!