欧美bbbwbbbw肥妇,免费乱码人妻系列日韩,一级黄片

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

 更新時(shí)間：2019年01月21日 17:16:19   作者：小斯不斯  
這篇文章主要為大家詳細(xì)介紹了js實(shí)現(xiàn)京東秒殺倒計(jì)時(shí)功能，文中示例代碼介紹的非常詳細(xì)，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下

本文實(shí)例為大家分享了js實(shí)現(xiàn)京東秒殺倒計(jì)時(shí)功能的具體代碼，供大家參考，具體內(nèi)容如下

首先給大家看看效果圖，因?yàn)槭亲龅囊苿?dòng)端的，所以放大給大家看看局部就行：

關(guān)于實(shí)現(xiàn)京東秒殺，之前用過(guò)其他的方法，今天給大家分享一個(gè)原生的方法吧，不會(huì)很難.

1、倒計(jì)時(shí)頁(yè)面結(jié)構(gòu)：

<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>

2、css樣式：這個(gè)是用css的編譯器sass寫(xiě)的

 .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;
   }
  }

3、js部分：

//倒計(jì)時(shí)
  
//1. 指定倒計(jì)時(shí)的到期時(shí)間(2018-5-29 21:08:49)
//可以直接使用年月日時(shí)分秒來(lái)創(chuàng)建一個(gè)date對(duì)象，但是月是從0開(kāi)始的
   var to = new Date(2018, 4, 29, 20, 20, 10);
 
   function antitime() {
    var now = new Date();
 
    //2. 拿到當(dāng)前時(shí)間和過(guò)期時(shí)間之間的時(shí)間差（毫秒）
    var deltaTime = to - now; //到期時(shí)間和當(dāng)前時(shí)間相差的毫秒數(shù)
    
    //如果超時(shí)了，就停止倒計(jì)時(shí)
    if (deltaTime <= 0) {
     //停止計(jì)時(shí)器
     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í)間的數(shù)字轉(zhuǎn)成字符串， 如果分秒毫秒不足10， 則前面補(bǔ)0
    var timeStr = "" + (m<10?"0"+m:m) + (s<10?"0"+s:s) + (ms<10?"0"+ms:ms);
    console.log(timeStr);
 
    //063535
 
    //each是用來(lái)遍歷.num元素， 其實(shí)你可以理解成循環(huán)
 
    $(".secondkill .num").each(function(index, span) {
     //console.log(span);
     $(span).html(timeStr.substring(index, index+1));
 
     //$(span), span默認(rèn)是一個(gè)js對(duì)象，需要用$(span)變成一個(gè)jquery對(duì)象
     //$(span).html();這個(gè)方法是用來(lái)設(shè)置span里面的值的
     //timeStr.subSring();該方法是用來(lái)截取字符串 “abcdefg”
    });
   }
 
   //每十毫秒執(zhí)行一次
   var timer = setInterval(antitime, 10);
  });

注意部分：

1、注意這個(gè)部分，時(shí)間要給定一個(gè)時(shí)間，比如京東上午十點(diǎn)秒殺結(jié)束，那這里時(shí)間就要填10點(diǎn)，注意月份是從0開(kāi)始的，所以5月要寫(xiě)4月。這個(gè)時(shí)間如果過(guò)了這個(gè)倒計(jì)時(shí)就不會(huì)再執(zhí)行了的，大家謹(jǐn)記。

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

2、這里拿到的是毫秒，在后面計(jì)算分秒毫秒的時(shí)候大家要注意換算。

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

3、要判斷，如果不足10就要給前面加一個(gè)0。

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

以上就是本文的全部?jī)?nèi)容，希望對(duì)大家的學(xué)習(xí)有所幫助，也希望大家多多支持腳本之家。

相關(guān)文章

最新評(píng)論