首页 > 代码库 > [JS] 自己弄得个倒计时

[JS] 自己弄得个倒计时

2024-09-12 00:09:37   244人阅读

 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>

 

[JS] 自己弄得个倒计时


联系
我们