仿京东秒杀倒计时
html代码
|
1
2
3
4
5
6
7
8
9
10
|
<div id="box"> <div class="txt">秒杀倒计时</div> <div class="hour"></div> <!-- 小时与分钟之间的冒号 --> <span class="h_m">:</span> <div class="minute"></div> <!-- 分钟与秒之间的冒号 --> <span class="m_s">:</span> <div class="second"></div></div> |
css样式代码
|
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
|
*{ margin: 0; padding: 0; } #box{ width: 200px; height:300px; margin: 200px 200px; background: red; position: relative; } .txt{ width: 150px; height:50px; text-align: center; line-height: 50px; color: #fff; font-size: 30px; font-weight: 900; position: absolute; left: 25px; top: 50px; } .hour{ left: 20px; } .h_m{ left: 68px; } .minute{ left: 80px; } .m_s{ right: 68px; } .second{ left: 140px; } .hour,.minute,.second{ position: absolute; top:200px; color: #fff; font-size: 20px; text-align: center; line-height: 40px; width: 40px; height: 40px; background: black; } .h_m, .m_s{ color: #fff; font-size: 20px; font-weight: 900; position: absolute; bottom: 70px; } |
js调用函数倒计时代码
|
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
|
//1、获取元素var hour=document.querySelector('.hour');var minute=document.querySelector('.minute');var second=document.querySelector('.second');var inputTime=+new Date('2020-3-11 20:00:00');//倒计时的结束时间，自己设置时间countDown();//先调用一次这个函数 防止第一次刷新页面有空白//2、开启定时器setInterval(countDown,1000);//1000毫秒，每一秒钟调用一次函数//3、倒计时-时分秒函数function countDown(){ var nowTime=+new Date(); //返回的是当前时间的总的毫秒数 var times=(inputTime-nowTime)/1000; // times是剩余时间的总的毫秒数 var h=parseInt(times/60/60%24); h=h<10?'0'+h:h;//判断数值小于10的情况 如 0-9改为 00-09 hour.innerHTML=h;//更改div里面的内容 把h给获取元素hour的内容 var m=parseInt(times/60%60); m=m<10?'0'+m:m; minute.innerHTML=m;//同上 var s=parseInt(times%60); s=s<10?'0'+s:s; second.innerHTML=s;//同上} |
效果图
最后代码过程就不过多讲解，比较简单易写，如需改进的地方，请评论再改进，谢谢
原文链接：https://blog.csdn.net/weixin_42681295/article/details/104793838
相关文章
