JavaScript 商城活动结束时间倒计时

最新推荐文章于 2020-12-01 18:03:15 发布

转载最新推荐文章于 2020-12-01 18:03:15 发布 · 147 阅读

0 ·

CC 4.0 BY-SA版权

原文链接：http://www.cnblogs.com/molao-doing/articles/3620245.html

文章标签：

#javascript #ViewUI

本文介绍了一种使用纯JavaScript实现倒计时的方法，并详细展示了如何通过代码更新页面上显示的时间，直至达到预设的结束时间。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

jQuery有很多款漂亮的倒计时插件，这里就不多赘术，在网上找了个纯js的倒计时，看着比较还行，这里分享给大家

1 <div id="times_container"style="border:1px; border-color:#999999; border-style:solid; background:#333333; color:#FFFFFF; width:500px; height:40px; line-height:40px; font-size:24px">
2     距离活动结束还有：<span id="times_day"> </span>天 <span id="times_hour">
3     </span>时 <span id="times_minute"> </span>分 <span id="second"> </span>秒
4 </div>

JavaScript代码

 1 <script type="text/javascript" language="javascript">
 2     setTimeout("count_down()", 10);//设置每一秒调用一次倒计时函数
 3     //根据天，时，分，秒的ID找到相对应的元素
 4     var time_day = document.getElementById("times_day");
 5     var time_hour = document.getElementById("times_hour");
 6     var time_minute = document.getElementById("times_minute");
 7     var time_second = document.getElementById("second");
 8     var time_end = new Date("2013/10/04 08:33:00"); // 设定活动结束结束时间
 9     time_end = time_end.getTime();
10     //定义倒计时函数
11     function count_down() {
12 
13         var time_now = new Date(); // 获取当前时间
14         time_now = time_now.getTime();
15         var time_distance = time_end - time_now; // 时间差：活动结束时间减去当前时间   
16         var int_day, int_hour, int_minute, int_second;
17         if (time_distance >= 0) {
18 
19             // 相减的差数换算成天数   
20             int_day = Math.floor(time_distance / 86400000);
21             time_distance -= int_day * 86400000;
22 
23             // 相减的差数换算成小时
24             int_hour = Math.floor(time_distance / 3600000);
25             time_distance -= int_hour * 3600000;
26             // 相减的差数换算成分钟   
27             int_minute = Math.floor(time_distance / 60000);
28             time_distance -= int_minute * 60000;
29 
30             // 相减的差数换算成秒数  
31             int_second = Math.floor(time_distance / 1000);
32 
33             // 判断小时小于10时，前面加0进行占位
34             if (int_hour < 10)
35                 int_hour = "0" + int_hour;
36 
37             // 判断分钟小于10时，前面加0进行占位      
38             if (int_minute < 10)
39                 int_minute = "0" + int_minute;
40 
41             // 判断秒数小于10时，前面加0进行占位 
42             if (int_second < 10)
43                 int_second = "0" + int_second;
44 
45             // 显示倒计时效果       
46             time_day.innerHTML = int_day;
47             time_hour.innerHTML = int_hour;
48             time_minute.innerHTML = int_minute;
49             time_second.innerHTML = int_second;
50             setTimeout("count_down()", 10);
51         } else {
52 
53             //指定的结束日期结束后，往后推迟3天，或者称之为：往后加3天
54             //在这里可以非常灵活的设置：比如往后推迟2天或往后加2天：2*24*60*60*1000
55             //比如往后推迟1天或往后加1天：1*24*60*60*1000
56             //比如往后推迟2小时或往后加2小时：2*60*60*1000
57             // 比如往后推迟40分钟或往后加40分钟：40*1000这里设置根据大家需要，灵活设置。9 11 13 14 15 20 24 29 31 79
58             time_end = time_end + 3 * 24 * 60 * 60 * 1000;
59             setTimeout("count_down()", 10);
60         }
61     }
62 </script>