专栏首页前端知识分享第137天:移动端-仿京东秒杀倒计时

第137天:移动端-仿京东秒杀倒计时

京东秒杀倒计时

1、HTML

 1 <div class="jd_secKill_left">
 2     <span class="ms_icon"></span>
 3     <h4 class="ms_name fl">掌上秒杀</h4>
 4     <div class="ms_time fl">
 5         <span class="num fl">0</span>
 6         <span class="num fl">0</span>
 7         <span class="str fl">:</span>
 8         <span class="num fl">0</span>
 9         <span class="num fl">0</span>
10         <span class="str fl">:</span>
11         <span class="num fl">0</span>
12         <span class="num fl">0</span>
13      </div>
14 </div>
15 <div class="jd_secKill_right fr">
16           <a href="">更多></a>
17 </div>

2、CSS

 1 .jd_secKill{
 2 }
 3 .jd_secKill .jd_secKill_left{
 4     float: left;
 5 }
 6 .jd_secKill .jd_secKill_left .ms_icon{
 7     background: url("../images/seckill-icon.png") no-repeat;
 8     background-size: 16px 20px;
 9     width: 16px;
10     height: 20px;
11     display: block;
12     float: left;
13     margin-left: 8px;
14     margin-top: 6px;
15 }
16 .jd_secKill .jd_secKill_left .ms_name{
17     font-size: 15px;
18     color: #d8505c;
19     font-weight: inherit;
20     margin-left: 8px;
21     line-height:30px;
22 }
23 .jd_secKill .jd_secKill_left .ms_time{
24     margin-top: 6px;
25     margin-left: 8px;
26 }
27 .jd_secKill .jd_secKill_left .ms_time span{
28     margin-right: 3px;
29     display: block;
30     line-height:20px;
31 }
32 .jd_secKill .jd_secKill_left .ms_time .num{
33     width: 15px;
34     height: 20px;
35     text-align: center;
36     background: #333;
37     color:#fff;
38 }
39 .jd_secKill .jd_secKill_left .ms_time .str{
40     width: 4px;
41     height: 15px;
42     text-align: center;
43 }
44 .jd_secKill_right a{
45     line-height:32px;
46     margin-right: 10px;
47 }

3、js

 1  /*秒杀倒计时*/
 2     var secondKill = function() {
 3         /*复盒子*/
 4         var parentTime = document.getElementsByClassName('ms_time')[0];
 5         /*span时间*/
 6         var timeList = parentTime.getElementsByClassName('num');
 7 
 8         console.log(timeList.length);
 9 
10         var times = 7 * 60 * 60;
11         var timer;
12         timer = setInterval(function () {
13             times--;
14 
15             var h = Math.floor(times / (60 * 60));
16             var m = Math.floor(times / 60 % 60);
17             var s = times % 60;
18 
19             //console.log(h + '-' + m + "-" + s);
20 
21             timeList[0].innerHTML = h > 10 ? Math.floor(h / 10) : 0;
22             timeList[1].innerHTML = h % 10;
23 
24             timeList[2].innerHTML = m > 10 ? Math.floor(m / 10) : 0;
25             timeList[3].innerHTML = m % 10;
26 
27             timeList[4].innerHTML = s > 10 ? Math.floor(s / 10) : 0;
28             timeList[5].innerHTML = s % 10;
29             if (times <= 0) {
30                 clearInterval(timer);
31             }
32         }, 1000);
33     }
34     secondKill();

运行效果:

本文参与腾讯云自媒体分享计划,欢迎正在阅读的你也加入,一起分享。

我来说两句

0 条评论
登录 后参与评论

相关文章

  • 第27天:js-表单获取焦点和数组声明遍历

    1、this指事件的调用者 2、input.value 表单更换内容 3、innerHTML更换盒子里的内容,文字、标签都能换。 4、isNaN("12")如果...

    半指温柔乐
  • 第54天:原生js实现轮播图效果

    一系列的大小相等的图片平铺,利用CSS布局只显示一张图片,其余隐藏。通过计算偏移量利用定时器实现自动播放,或通过手动点击事件切换图片。

    半指温柔乐
  • 第178天:表单验证

    半指温柔乐
  • 数据结构 浅谈归并排序

    友情提示:此篇文章大约需要阅读 8分钟33秒,不足之处请多指教,感谢你的阅读。订阅本站

    Debug客栈
  • <双指针问题>全是正数的数组累加和为k的最长子数组长度

    大学里的混子
  • isNotBlank()和isNotEmpty()的区别

    IT云清
  • 递归与分治之快速排序

    分治法就是把一个大问题分解为多个类型相同的子问题,最后把这些子问题的解合并起来就是问题的解。 快速排序(Quicksort)是对冒泡排序的一种改进,采用了分治的...

    欠扁的小篮子
  • 伸展树(splay tree)

    对于二叉查找树而言,每次操作的最坏时间复杂度是O(N)。(当树退化为链表的时候)。为了解决这个问题,我们给树附加了一个平衡条件。平衡条件限制了任何节点的深度都不...

    zy010101
  • Ubuntu更换apt源

    剑行者
  • Ubuntu 更改软件源

    Dean0731

扫码关注云+社区

领取腾讯云代金券