1 <!DOCTYPE html>
2 <html lang="en">
3 <head>
4 <meta charset="UTF-8">
5 <title>时间倒计时</title>
6 <style>
7 span{
8 display: inline-block;
9
10 }
11 </style>
12 </head>
13 <body>
14 <center>
15 <span id="time">getbootstrap.com</span><br/>
16 <span id="time"></span><br/>
17 <span id="time1"></span><br/>
18 <span id="time2"></span><br/>
19 <span id="time3"></span><br/>
20 <span id="time4"></span><br/>
21 <span id="time5"></span><br/>
22 </center>
23
24 </body>
25 <script>
26 function show_time(){
27 var now_time=new Date();//创建当前时间
28 // console.log(now_time.toLocaleString());//转化成本地时间
29 var new_time=new Date('2017,7,23');//设置活动时间
30 // console.log(new_time.toLocaleString());
31 var cu_time=new_time.getTime()-now_time.getTime();//看时间差
32 // console.log(cu_time);
33 // console.log(new_time.getTime());
34 // console.log(now_time.getTime());
35 var cu_seconds=parseInt(cu_time/1000%60);
36 var cu_seconds1=parseInt(cu_time/1000);
37 //把所获得的时间差转化成秒，原值是毫秒转化单位是1000，%60是为了余数且取整，为了更好展示
38 //console.log(cu_seconds);
39 var cu_minutes=parseInt(cu_time/1000/60%60);//原来同上，转化为分钟，取余值且取整
40 var cu_minutes1=parseInt(cu_time/1000/60);
41 //console.log(cu_minutes);
42 var cu_hours=parseInt(cu_time/1000/60/60%24);//原来同上，转化为小时，取余值且取整
43 var cu_hours1=parseInt(cu_time/1000/60/60);
44 //console.log(cu_hours);
45 var cu_day=parseInt(cu_time/1000/60/60/24);//原来同上，转化为天,且取整
46 var cu_day1=parseInt(cu_time/1000/60/60/24/30);
47 // console.log(cu_day);
48 time.innerHTML="<h2>"+"距离活动还有<font color='red' size='20px'>"+cu_day+"</font>天<font color='red' size='20px'>"+cu_hours+"</font>小时<font color='red' size='20px'>"+cu_minutes+"</font>分<font color='red' size='20px'>"+cu_seconds+'</font>秒'+"</h2>";
49 time1.innerHTML="<h2>"+"距离活动还有<font color='red' size='20px'>"+cu_day1+"</font>个月</h2>";
50 time2.innerHTML="<h2>"+"距离活动还有<font color='red' size='20px'>"+cu_day+"</font>天</h2>";
51 time3.innerHTML="<h2>"+"距离活动还有<font color='red' size='20px'>"+cu_hours1+"</font>小时</h2>";
52 time4.innerHTML="<h2>"+"距离活动还有<font color='red' size='20px'>"+cu_minutes1+"</font>分</h2>";
53 time5.innerHTML="<h2>"+"距离活动还有<font color='red' size='20px'>"+cu_seconds1+"</font>秒</h2>";
54 }
55 setInterval(show_time,500);//设置定时器500毫秒刷新一次
56
57 </script>
58 </html>
