webJ

追求自由美好的生活

JS 倒计时效果，修改可拿去用

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<meta name="author" content="陈泽江 <820289461@qq.com>">
<meta name="description" content="JS学习">
<meta name="viewport" content="width=device-width,initial-scale=1.0,maximum-scale=1.0,minimum-scale=1.0,user-scalable=no" />
<meta http-equiv="X-UA-Compatible" content="IE=edge">
 
<title>JS 倒计时</title>
</head>
<body>
<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">
 
         距离活动结束还有：<span id="times_day"> </span>天
                                          <span id="times_hour"> </span>时  
                                          <span id="times_minute"> </span>分    
                                          <span id="second"> </span>秒  
 
</div>
 
 
<script type="text/javascript"  language="javascript">
setTimeout("count_down()",1000);//设置每一秒调用一次倒计时函数
 
 
//根据天，时，分，秒的ID找到相对应的元素
 
var time_day = document.getElementById("times_day");
var time_hour = document.getElementById("times_hour");
var time_minute = document.getElementById("times_minute");
var time_second = document.getElementById("second");
var time_end = new Date("2015/10/04 08:33:00");  // 设定活动结束结束时间
 
time_end = time_end.getTime();
 
 
//定义倒计时函数
 
function count_down(){
   var time_now = new Date();  // 获取当前时间
    //  alert(time_now);  格林威治
   time_now = time_now.getTime();
   //alert(time_now);  // 时间戳
   var time_distance = time_end - time_now;  // 时间差：活动结束时间减去当前时间  
   //alert(time_distance);
   var int_day, int_hour, int_minute, int_second;  
if(time_distance >= 0){  
 
     // 相减的差数换算成天数  
 
     int_day = Math.floor(time_distance/86400000)
     console.log(int_day);
     time_distance -= int_day * 86400000;
     console.log(time_distance);
// 相减的差数换算成小时
        int_hour = Math.floor(time_distance/3600000)
        time_distance -= int_hour * 3600000;  
 
// 相减的差数换算成分钟  
     int_minute = Math.floor(time_distance/60000)    
     time_distance -= int_minute * 60000;
 
// 相减的差数换算成秒数  
      int_second = Math.floor(time_distance/1000)    
 
    // 判断小时小于10时，前面加0进行占位
        if(int_hour < 10)
        int_hour = "0" + int_hour;  
 
 
// 判断分钟小于10时，前面加0进行占位      
 
  if(int_minute < 10)    
 
   int_minute = "0" + int_minute;  
 
 
// 判断秒数小于10时，前面加0进行占位
 
       if(int_second < 10)
 
       int_second = "0" + int_second;      
 
 
// 显示倒计时效果      
 
time_day.innerHTML = int_day;
 
time_hour.innerHTML = int_hour;
 
time_minute.innerHTML = int_minute;
 
time_second.innerHTML = int_second;
 
setTimeout("count_down()",1000);
 
    }else{
 
//指定的结束日期结束后，往后推迟3天，或者称之为：往后加3天
 
//在这里可以非常灵活的设置：比如往后推迟2天或往后加2天：2*24*60*60*1000
 
//比如往后推迟1天或往后加1天：1*24*60*60*1000
 
//比如往后推迟2小时或往后加2小时：2*60*60*1000
 
// 比如往后推迟40分钟或往后加40分钟：40*1000这里设置根据大家需要，灵活设置。
 
time_end=time_end+3*24*60*60*1000;
 
setTimeout("count_down()",1000);
 
   }
 
}
 
</script>
 
</body>
 
</html>

 

发表评论

电子邮件地址不会被公开。