本站首页 收藏本站
广告位联系

APP正在开发中...
返回顶部
您的位置： 主页 > 网络编程 > JavaScript >

收藏
分享到

JavaScript仿京东秒杀倒计时的代码

JavaScript 来源：互联网搜集 作者：秩名 发布时间：2020-03-17 20:15:53 人浏览
摘要

仿京东秒杀倒计时 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 :

仿京东秒杀倒计时

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;//同上
}

效果图

最后代码过程就不过多讲解，比较简单易写，如需改进的地方，请评论再改进，谢谢
版权声明 : 本文内容来源于互联网或用户自行发布贡献，该文观点仅代表原作者本人。本站仅提供信息存储空间服务和不拥有所有权，不承担相关法律责任。如发现本站有涉嫌抄袭侵权， 违法违规的内容， 请发送邮件至2530232025#qq.cn(#换@)举报，一经查实，本站将立刻删除。

您可能感兴趣的文章 :

原文链接 : https://blog.csdn.net/weixin_42681295/article/details/104793838
相关文章
推荐阅读
最新更新
友情链接
  • 本站所有内容来源于互联网或用户自行发布，本站仅提供信息存储空间服务，不拥有版权，不承担法律责任。如有侵犯您的权益，请您联系站长处理！
  • Copyright © 2017-2022 F11.CN All Rights Reserved. F11站长开发者网 版权所有 | 苏ICP备2022031554号-1 | 51LA统计