快捷導(dǎo)航

JavaScript實現(xiàn)限時秒殺功能

更新時間：2021年08月26日 08:45:22 作者：layroy

各種電商活動都喜換選擇限時秒殺活動形式，這篇文章主要為大家詳細介紹了JavaScript實現(xiàn)限時秒殺功能，文中示例代碼介紹的非常詳細，具有一定的參考價值，感興趣的小伙伴們可以參考一下

本文實例為大家分享了JavaScript實現(xiàn)限時秒殺功能的具體代碼，供大家參考，具體內(nèi)容如下

<!DOCTYPE html>
<html>
 <head>
  <meta charset="utf-8">
  <title></title>
 </head>
 <body>
  <div class="box">
   <div id="d"></div>  <!-- 剩余的天數(shù) -->
   <div id="h"></div>  <!-- 剩余的小時 -->
   <div id="m"></div>  <!-- 剩余的分鐘 -->
   <div id="s"></div>  <!-- 剩余的秒數(shù) -->
  </div>
  <script>
   //設(shè)置秒殺結(jié)束時間
   var endTime = new Date('2021-10-22 18:51:59'),endSeconds = endTime.getTime();
   //定義變量保存剩余的時間
   var d = h = m = s = 0;
   //設(shè)置定時器，實現(xiàn)限時秒殺效果
   var id = setInterval(seckill,1000);
   function seckill(){
    var nowTime = new Date(); //獲取當前時間
     //獲取時間差，單位為秒
     var remaining = parseInt((endSeconds - nowTime.getTime())/1000);
     if(remaining>0){//判斷秒殺是否過期
     //計算剩余天數(shù)（除以60*60*24取整，獲取剩余的天數(shù)）
      d=parseInt(remaining / 86400);
      //計算剩余小時（除以60*60轉(zhuǎn)換為小時，與24小時取模，獲取剩余的小時）
      h=parseInt((remaining / 3600) % 24);
      //計算剩余分鐘（除以60轉(zhuǎn)為分鐘，與60取模，獲取剩余的分鐘）
      m=parseInt((remaining / 60) % 60);
      //計算剩余秒（與60取模，獲取剩余的秒數(shù)）
      s=parseInt(remaining % 60);
      //統(tǒng)一利用兩位數(shù)表示剩余的天、小時、分鐘、秒
      d = d<10 ? '0' + d : d;
      h = h<10 ? '0' + h : h;
      m = m<10 ? '0' + m : m;
      s = s<10 ? '0' + s : s;
     }else{
      clearInterval(id);//秒殺過期，取消定時器
      d = h = m = s ='00';
     }
     //將剩余的天，小時，分鐘和秒顯示到指定的網(wǎng)頁中
     document.getElementById('d').innerHTML = d + '天';
     document.getElementById('h').innerHTML = h + '時';
     document.getElementById('m').innerHTML = m + '分';
     document.getElementById('s').innerHTML = s + '秒';
   }
  </script>
 </body>
</html>

再為大家分享一個JS實現(xiàn)簡單的限時秒殺案例：

<!DOCTYPE html>
<html>
<head lang="en">
    <meta charset="UTF-8">
    <title></title>
    <style>
        .product{  border: 3px solid orange; display: inline-block; margin-left: 400px; width: 400px;  }
        .red{  color: red; font-size: 25px;  }
    </style>
</head>
<body>


<div class="product" style="text-align: center;">
    <img src="jquery案例-百葉窗/images/0.jpg" alt="" width="150"/>
    <p>絕世好男人</p>
    <span>原價：<del>99億</del></span>
    <br/>
    <span>現(xiàn)價：<span class="red">100塊</span></span>
    <br/>
    <span>距離搶購結(jié)束還有：</span><span id="time"></span>
</div>


<script>


    var stopTime = new Date(3000,11,14,0,0,0);
    var nowTime = new Date();
    var jianGe = (stopTime-nowTime)/1000;


    var day = Math.floor(jianGe/60/60/24);
    var hour = Math.floor(jianGe/60/60%24);
    var min = Math.floor(jianGe/60%60);
    var sec = Math.floor(jianGe%60);
    var showTime = day+'天'+hour+'小時'+min+'分鐘'+sec+'秒';
    document.getElementById('time').innerText = showTime;


    //定時器：每隔多長事件執(zhí)行一次某函數(shù)
    //setInterval(func,ms)
    var timer = setInterval(function () {


        var nowTime = new Date();
        var jianGe = (stopTime-nowTime)/1000;


        var day = Math.floor(jianGe/60/60/24);
        var hour = Math.floor(jianGe/60/60%24);
        var min = Math.floor(jianGe/60%60);
        var sec = Math.floor(jianGe%60);


        var showTime = day+'天'+hour+'小時'+min+'分鐘'+sec+'秒';


        document.getElementById('time').innerText = showTime;


        if(day==0&&hour==0&&min==0&&sec==0){
            //關(guān)閉定時器
            clearInterval(timer);
        }


    },1000);

</script>

</body>
</html>

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

您可能感興趣的文章: