js實現(xiàn)京東秒殺倒計時功能

<div class="secondkill">
 <div class="top">
 <span class="red fl">掌上秒殺</span>
 <span class="num fl">0</span>
 <span class="num fl">5</span>
 <span class="colon fl">:</span>
 <span class="num fl">3</span>
 <span class="num fl">5</span>
 <span class="colon fl">:</span>
 <span class="num fl">3</span>
 <span class="num fl">0</span>
 <span class="more fr">更多</span>
</div>

 .secondkill {
 .top {
 height: 40px;
 border-top: 3px solid $jdred;
 border-bottom: 1px solid #ccc;
 padding-top: 5px;
 
 .red {
 color: $jdred;
 }
 
 .num {
 background-color: #000;
 margin: 0px 3px;
 padding: 3px;
 color: white;
 }
 }

//倒計時
 
//1. 指定倒計時的到期時間(2018-5-29 21:08:49)
//可以直接使用年月日時分秒來創(chuàng)建一個date對象，但是月是從0開始的
 var to = new Date(2018, 4, 29, 20, 20, 10);
 
 function antitime() {
 var now = new Date();
 
 //2. 拿到當前時間和過期時間之間的時間差（毫秒）
 var deltaTime = to - now; //到期時間和當前時間相差的毫秒數(shù)
 
 //如果超時了，就停止倒計時
 if (deltaTime <= 0) {
 //停止計時器
 window.clearInterval(timer);
 //停止執(zhí)行下面的代碼
 return;
 }
 
 //已知毫秒數(shù)，算出幾分幾秒幾秒
 var m = Math.floor(deltaTime / (60*1000)); 
 //算出有多少秒
 var s = Math.floor(deltaTime / 1000 % 60);
 //算出多少毫秒, 毫秒數(shù)只顯示10位和百位
 var ms = Math.floor(deltaTime % 1000 / 10); 
 
 //把時間的數(shù)字轉(zhuǎn)成字符串， 如果分秒毫秒不足10， 則前面補0
 var timeStr = "" + (m<10?"0"+m:m) + (s<10?"0"+s:s) + (ms<10?"0"+ms:ms);
 console.log(timeStr);
 
 //063535
 
 //each是用來遍歷.num元素， 其實你可以理解成循環(huán)
 
 $(".secondkill .num").each(function(index, span) {
 //console.log(span);
 $(span).html(timeStr.substring(index, index+1));
 
 //$(span), span默認是一個js對象，需要用$(span)變成一個jquery對象
 //$(span).html();這個方法是用來設置span里面的值的
 //timeStr.subSring();該方法是用來截取字符串 “abcdefg”
 });
 }
 
 //每十毫秒執(zhí)行一次
 var timer = setInterval(antitime, 10);
 });

var to = new Date(2018, 4, 29, 20, 20, 10);

//2. 拿到當前時間和過期時間之間的時間差（毫秒）
var deltaTime = to - now; //到期時間和當前時間相差的毫秒數(shù)

//把時間的數(shù)字轉(zhuǎn)成字符串， 如果分秒毫秒不足10， 則前面補0
 var timeStr = "" + (m<10?"0"+m:m) + (s<10?"0"+s:s) + (ms<10?"0"+ms:ms);
 console.log(timeStr);