前往小程序,Get更优阅读体验!
立即前往
首页
学习
活动
专区
工具
TVP
发布
社区首页 >专栏 >第137天:移动端-仿京东秒杀倒计时

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

作者头像
半指温柔乐
发布2018-09-11 10:11:24
1.2K0
发布2018-09-11 10:11:24
举报
文章被收录于专栏:前端知识分享

京东秒杀倒计时

1、HTML

代码语言:javascript
复制
 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

代码语言:javascript
复制
 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

代码语言:javascript
复制
 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();

运行效果:

本文参与 腾讯云自媒体同步曝光计划,分享自作者个人站点/博客。
原始发表:2018-01-06 ,如有侵权请联系 cloudcommunity@tencent.com 删除

本文分享自 作者个人站点/博客 前往查看

如有侵权,请联系 cloudcommunity@tencent.com 删除。

本文参与 腾讯云自媒体同步曝光计划  ,欢迎热爱写作的你一起参与!

评论
登录后参与评论
0 条评论
热度
最新
推荐阅读
目录
  • 1、HTML
  • 2、CSS
  • 3、js
领券
问题归档专栏文章快讯文章归档关键词归档开发者手册归档开发者手册 Section 归档