第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();

运行效果：