• <fieldset id="8imwq"><menu id="8imwq"></menu></fieldset>
  • <bdo id="8imwq"><input id="8imwq"></input></bdo>
    最新文章專題視頻專題問答1問答10問答100問答1000問答2000關鍵字專題1關鍵字專題50關鍵字專題500關鍵字專題1500TAG最新視頻文章推薦1 推薦3 推薦5 推薦7 推薦9 推薦11 推薦13 推薦15 推薦17 推薦19 推薦21 推薦23 推薦25 推薦27 推薦29 推薦31 推薦33 推薦35 推薦37視頻文章20視頻文章30視頻文章40視頻文章50視頻文章60 視頻文章70視頻文章80視頻文章90視頻文章100視頻文章120視頻文章140 視頻2關鍵字專題關鍵字專題tag2tag3文章專題文章專題2文章索引1文章索引2文章索引3文章索引4文章索引5123456789101112131415文章專題3
    問答文章1 問答文章501 問答文章1001 問答文章1501 問答文章2001 問答文章2501 問答文章3001 問答文章3501 問答文章4001 問答文章4501 問答文章5001 問答文章5501 問答文章6001 問答文章6501 問答文章7001 問答文章7501 問答文章8001 問答文章8501 問答文章9001 問答文章9501
    當前位置: 首頁 - 科技 - 知識百科 - 正文

    js實現京東秒殺倒計時功能

    來源:懂視網 責編:小OO 時間:2020-11-27 22:01:36
    文檔

    js實現京東秒殺倒計時功能

    本文實例為大家分享了js實現京東秒殺倒計時功能的具體代碼,供大家參考,具體內容如下:首先給大家看看效果圖,因為是做的移動端的,所以放大給大家看看局部就行。關于實現京東秒殺,之前用過其他的方法,今天給大家分享一個原生的方法吧,不會很難。1、倒計時頁面結構。
    推薦度:
    導讀本文實例為大家分享了js實現京東秒殺倒計時功能的具體代碼,供大家參考,具體內容如下:首先給大家看看效果圖,因為是做的移動端的,所以放大給大家看看局部就行。關于實現京東秒殺,之前用過其他的方法,今天給大家分享一個原生的方法吧,不會很難。1、倒計時頁面結構。

    本文實例為大家分享了js實現京東秒殺倒計時功能的具體代碼,供大家參考,具體內容如下

    首先給大家看看效果圖,因為是做的移動端的,所以放大給大家看看局部就行:

    關于實現京東秒殺,之前用過其他的方法,今天給大家分享一個原生的方法吧,不會很難.

    1、倒計時頁面結構:

    <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樣式:這個是用css的編譯器sass寫的

     .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部分:

    //倒計時
     
    //1. 指定倒計時的到期時間(2018-5-29 21:08:49)
    //可以直接使用年月日時分秒來創建一個date對象,但是月是從0開始的
     var to = new Date(2018, 4, 29, 20, 20, 10);
     
     function antitime() {
     var now = new Date();
     
     //2. 拿到當前時間和過期時間之間的時間差(毫秒)
     var deltaTime = to - now; //到期時間和當前時間相差的毫秒數
     
     //如果超時了,就停止倒計時
     if (deltaTime <= 0) {
     //停止計時器
     window.clearInterval(timer);
     //停止執行下面的代碼
     return;
     }
     
     //已知毫秒數,算出幾分幾秒幾秒
     var m = Math.floor(deltaTime / (60*1000)); 
     //算出有多少秒
     var s = Math.floor(deltaTime / 1000 % 60);
     //算出多少毫秒, 毫秒數只顯示10位和百位
     var ms = Math.floor(deltaTime % 1000 / 10); 
     
     //把時間的數字轉成字符串, 如果分秒毫秒不足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元素, 其實你可以理解成循環
     
     $(".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”
     });
     }
     
     //每十毫秒執行一次
     var timer = setInterval(antitime, 10);
     });

    注意部分:

    1、注意這個部分,時間要給定一個時間,比如京東上午十點秒殺結束,那這里時間就要填10點,注意月份是從0開始的,所以5月要寫4月。這個時間如果過了這個倒計時就不會再執行了的,大家謹記。

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

    2、這里拿到的是毫秒,在后面計算分秒毫秒的時候大家要注意換算。

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

    3、要判斷,如果不足10就要給前面加一個0。

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

    聲明:本網頁內容旨在傳播知識,若有侵權等問題請及時與本網聯系,我們將在第一時間刪除處理。TEL:177 7030 7066 E-MAIL:11247931@qq.com

    文檔

    js實現京東秒殺倒計時功能

    本文實例為大家分享了js實現京東秒殺倒計時功能的具體代碼,供大家參考,具體內容如下:首先給大家看看效果圖,因為是做的移動端的,所以放大給大家看看局部就行。關于實現京東秒殺,之前用過其他的方法,今天給大家分享一個原生的方法吧,不會很難。1、倒計時頁面結構。
    推薦度:
    標簽: 京東 js 倒計時
    • 熱門焦點

    最新推薦

    猜你喜歡

    熱門推薦

    專題
    Top
    主站蜘蛛池模板: 精品无码久久久久国产| 久久精品国产影库免费看| 国产成人精品无码片区在线观看| 国产精品va在线观看无码| 午夜DY888国产精品影院| 精品亚洲一区二区三区在线播放| 99久久精品费精品国产一区二区| 伊人精品视频在线| 国产精品龙口护士门在线观看| 99精品视频在线观看re| 亚洲精品亚洲人成在线观看| 久久99精品国产麻豆不卡| 久久国产精品国产自线拍免费| 无码人妻精品一区二区三区久久久| 精品久久国产一区二区三区香蕉 | 久久精品一本到99热免费| 欧美国产精品va在线观看| 国产高清在线精品一本大道国产| 久久精品国产99国产电影网| 国产精品亚洲一区二区三区在线 | 亚洲精品无码久久久久sm| 国产一在线精品一区在线观看| 久久精品成人免费网站| 第一福利永久视频精品| 久久精品中文騷妇女内射| 欧美精品欧美人与动人物牲交| 久久99精品国产99久久| 精品久久无码中文字幕| 亚洲精品岛国片在线观看| 欧美精品福利视频一区二区三区久久久精品| 99久久99久久精品国产| 四虎永久在线精品国产免费| 国产精品视频网| 91在线视频精品| 国产精品合集一区二区三区| 2022国产精品自产拍在线观看 | 精品国产污污免费网站入口| 国产精品无码永久免费888| 国产高清一级毛片精品| 国产精品综合专区中文字幕免费播放 | 99精品伊人久久久大香线蕉|