京东秒杀倒计时
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();
运行效果：
