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

JS實現(xiàn)商城秒殺倒計時功能(動態(tài)設(shè)置秒殺時間)

 更新時間:2019年12月12日 09:38:23   作者:緣飛夢  
這篇文章主要介紹了JS實現(xiàn)商城秒殺倒計時功能(動態(tài)設(shè)置秒殺時間),本文通過實例代碼給大家介紹的非常詳細,具有一定的參考借鑒價值,需要的朋友可以參考下

一年一度的雙十二如期而至,今天的你買買買了嗎,下面小編給大家分享一個動態(tài)秒殺倒計時功能。

效果圖 

<!DOCTYPE html>
<html>
 <head>
  <meta charset="UTF-8">
  <title></title>
 </head>
 <body>
  <div id="noStart">活動未開始</div>
  <div class="div1" id="startNow" style="display: none;">開始購買</div>
  <div class="div2" id="stopNow" style="display: none;">活動結(jié)束</div>
  <div>
   <span class="content"></span>
   <span class="botHours"></span>時
   <span class="botMIn"></span>分
   <span class="botSecond"></span>秒
  </div>
 </body>
</html>
<script src="js/jquery.min.js"></script>
<script>
 $(function() {
  fn()
  function fn() {
   var timer = setInterval(function() {
    var start = '2019/03/13 00:00:00';
    var StartTime = new Date(start);
    var NowTime = new Date();
    var day = NowTime.getDate();
    var month = NowTime.getMonth() + 1;
    var year = NowTime.getFullYear();
    var tw = year + '/' + month + '/' + day + ' 09:00:00';
    var ei = year + '/' + month + '/' + day + ' 10:00:00';
    var tw1 = year + '/' + month + '/' + day +' 14:00:00';
    var ei1 = year + '/' + month + '/' + day +' 15:00:00';
    tw = new Date(tw).getTime();
    ei = new Date(ei).getTime();
    tw1 = new Date(tw1).getTime();
    ei1 = new Date(ei1).getTime();
    var EndTime = '';
    if(NowTime < StartTime) {
     EndTime = StartTime;
     $('#stopNow').css('display', 'none');
     $('#startNow').css('display', 'none');
     $('#noStart').css('display', 'block');
     $(".content").html("距離活動開始")
    } else {
     if(NowTime < tw) {
      EndTime = tw;
      $('#stopNow').css('display', 'none');
      $('#startNow').css('display', 'none');
      $('#noStart').css('display', 'block');
      $(".content").html("距離活動開始剩余")
     } else if(NowTime >= tw && NowTime < ei) {
      EndTime = ei;
      $('#stopNow').css('display', 'none');
      $('#startNow').css('display', 'block');
      $('#noStart').css('display', 'none');
      $(".content").html("距離活動結(jié)束剩余")
     }else if(NowTime < tw1){
      EndTime =tw1;
      $('#stopNow').css('display', 'none');
      $('#startNow').css('display', 'none');
      $('#noStart').css('display', 'block');
      $(".content").html("距離活動開始剩余")
     } else if(NowTime >= tw1 && NowTime < ei1) {
      EndTime = ei1;
      $('#stopNow').css('display', 'none');
      $('#startNow').css('display', 'block');
      $('#noStart').css('display', 'none');
      $(".content").html("距離活動結(jié)束剩余")
     }else if(NowTime >= ei1) {
      EndTime = tw + 24 * 60 * 60 * 1000;
      $('#stopNow').css('display', 'block');
      $('#startNow').css('display', 'none');
      $('#noStart').css('display', 'none');
      $(".content").html("距離活動開始剩余")
     }
    }
    console.log(EndTime)
    var t = EndTime - NowTime;
    if(t < 1000) {
     window.location.reload();
     clearInterval(timer);
     timer = null;
     return false;
    }
    var d = 0;
    var h = 0;
    var m = 0;
    var s = 0;
    if(t >= 0) {
     d = Math.floor((t / 1000 / 3600) / 24);
     h = Math.floor((t / 1000 / 3600) % 24);
     m = Math.floor((t / 1000 / 60) % 60);
     s = Math.floor(t / 1000 % 60);
     if(d < 10) {
      d = "0" + d;
     }
     if(h < 10) {
      h = "0" + h;
     }
     if(m < 10) {
      m = "0" + m;
     }
     if(s < 10) {
      s = "0" + s;
     }
     $('.botHours').html(h);
     $('.botMIn').html(m);
     $('.botSecond').html(s);
    }
   }, 1000)
  }
 });
</script>

總結(jié)

以上所述是小編給大家介紹的JS實現(xiàn)商城秒殺倒計時功能(動態(tài)設(shè)置秒殺時間),希望對大家有所幫助,如果大家有任何疑問請給我留言,小編會及時回復(fù)大家的。在此也非常感謝大家對腳本之家網(wǎng)站的支持!
如果你覺得本文對你有幫助,歡迎轉(zhuǎn)載,煩請注明出處,謝謝!

相關(guān)文章

  • 5個讓你眼前一亮的JavaScript裝飾器技巧

    5個讓你眼前一亮的JavaScript裝飾器技巧

    JavaScript?裝飾器是一種特殊的功能,允許在不修改源代碼的情況下動態(tài)修改類和函數(shù)的行為,本文將介紹五個讓你眼前一亮的裝飾器技巧,包括裝飾函數(shù)參數(shù)、裝飾類屬性、裝飾函數(shù)返回值和裝飾函數(shù)調(diào)用,需要的朋友可以參考下
    2023-06-06
  • 微信小程序?qū)崿F(xiàn)左滑刪除效果源碼

    微信小程序?qū)崿F(xiàn)左滑刪除效果源碼

    這篇文章主要給大家介紹了關(guān)于微信小程序?qū)崿F(xiàn)左滑刪除效果的相關(guān)資料,左滑刪除效果在app的交互方式中十分流行,比如全民應(yīng)用微信,文中給出了詳細的實現(xiàn)代碼,需要的朋友可以參考下
    2023-08-08
  • (推薦一個超好的JS函數(shù)庫)S.Sams Lifexperience ScriptClassLib

    (推薦一個超好的JS函數(shù)庫)S.Sams Lifexperience ScriptClassLib

    (推薦一個超好的JS函數(shù)庫)S.Sams Lifexperience ScriptClassLib...
    2007-04-04
  • js實現(xiàn)不提示直接關(guān)閉網(wǎng)頁窗口

    js實現(xiàn)不提示直接關(guān)閉網(wǎng)頁窗口

    本文主要介紹了js實現(xiàn)不提示直接關(guān)閉網(wǎng)頁窗口的方法。具有很好的參考價值,下面跟著小編一起來看下吧
    2017-03-03
  • JS實現(xiàn)用戶注冊時獲取短信驗證碼和倒計時功能

    JS實現(xiàn)用戶注冊時獲取短信驗證碼和倒計時功能

    在用戶注冊時,通常需要短信驗證碼,而且為了交互效果,也需要增加倒計時。該如何實現(xiàn)獲取驗證碼倒計時功能呢?下面小編給大家分享JS實現(xiàn)用戶注冊時獲取短信驗證碼和倒計時的代碼,一起看看吧
    2016-10-10
  • 微信小程序聊天功能的示例代碼

    微信小程序聊天功能的示例代碼

    這篇文章主要介紹了微信小程序聊天功能的示例代碼,文中通過示例代碼介紹的非常詳細,對大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價值,需要的朋友們下面隨著小編來一起學(xué)習(xí)學(xué)習(xí)吧
    2020-01-01
  • C#程序員入門學(xué)習(xí)微信小程序的筆記

    C#程序員入門學(xué)習(xí)微信小程序的筆記

    這篇文章主要給大家分享了一位C#程序員入門學(xué)習(xí)微信小程序的筆記,文中通過示例代碼介紹的非常詳細,對大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價值,需要的朋友們下面來一起學(xué)習(xí)學(xué)習(xí)吧
    2019-03-03
  • 只有 20 行的 JavaScript 模板引擎實例詳解

    只有 20 行的 JavaScript 模板引擎實例詳解

    這篇文章主要介紹了只有 20 行的 JavaScript 模板引擎,結(jié)合實例形式分析了JavaScript 模板引擎實現(xiàn)方法與相關(guān)注意事項,需要的朋友可以參考下
    2020-05-05
  • 解決微信小程序調(diào)用moveToLocation失效問題【超簡單】

    解決微信小程序調(diào)用moveToLocation失效問題【超簡單】

    這篇文章主要介紹了解決微信小程序調(diào)用moveToLocation失效問題,解決方法超級簡單,需要的朋友可以參考下
    2019-04-04
  • javascript中的五種基本數(shù)據(jù)類型

    javascript中的五種基本數(shù)據(jù)類型

    在javascript中申明變量使用的關(guān)鍵字都是var,這點與其他的編程語言不盡相同,但是javascript亦含有五種基本的數(shù)據(jù)類型(也可以說是簡單數(shù)據(jù)類型),它們分別是:Undefined,Null,Boolean,Number和String。還含有一種復(fù)雜數(shù)據(jù)類型—Object。這里我們不談復(fù)雜數(shù)據(jù)類型
    2015-08-08

最新評論