溫馨提示×

溫馨提示×

您好，登錄后才能下訂單哦！

密碼登錄×
登錄注冊×
其他方式登錄
點擊 登錄注冊 即表示同意《億速云用戶服務條款》

JS秒殺倒計時功能完整實例【使用jQuery3.1.1】

發(fā)布時間：2020-09-11 11:11:49 來源：腳本之家 閱讀：159 作者：阿朗999 欄目：web開發(fā)

本文實例講述了JS秒殺倒計時功能。分享給大家供大家參考，具體如下：

代碼

<!DOCTYPE html>
<html>
<head>
  <meta charset="UTF-8">
  <title></title>
</head>
<body onload="miaosha();">
    <p class="tit_right" >
      <span id="d" >00</span>天
      <span id="h" >00</span>時
      <span id="m" >00</span>分
      <span id="s" >00</span>秒
    </p>
</body>
</html>
<script src="https://code.jquery.com/jquery-3.1.1.min.js"></script>
<script>
  var timer = null;
  // 秒殺函數(shù)
  function miaosha(year, month, day, hour, minute, second) {
    // 剩余時間：設定的-當前的
    var leftTime = (new Date(year, month - 1, day, hour, minute, second)) - (new Date());
    // parseInt()返回一個整數(shù)。得出剩余的時分秒
    var days = parseInt(leftTime / 1000 / 60 / 60 / 24, 10);
    var hours = parseInt(leftTime / 1000 / 60 / 60 % 24, 10);
    var minutes = parseInt(leftTime / 1000 / 60 % 60, 10);
    var seconds = parseInt(leftTime / 1000 % 60, 10);
    // 結束的時候
    if (seconds < 0) {
      alert("快點！");
      clearTimeout(timer);
    }
    else {
      // 格式的轉化
      days = fix(days, 2);
      hours = fix(hours, 2);
      minutes = fix(minutes, 2);
      seconds = fix(seconds, 2);
      // 遞歸調用 注意：比當前時間大！
      timer = setTimeout("miaosha(2019,09,05,10,56,00)", 1000); //// 設置開始的時間
      // 設置時分秒
      document.getElementById("h").innerHTML = hours;
      document.getElementById("m").innerHTML = minutes;
      document.getElementById("s").innerHTML = seconds;
      document.getElementById("d").innerHTML = days;
    }
  }
  //fix函數(shù)：數(shù)字加0
  function fix(num, length) {
    console.log(num);
    // 數(shù)字轉化為字符串 進行拼接
    return num.toString().length<length?'0'+num:num;
  }
</script>

顯示

JS秒殺倒計時功能完整實例【使用jQuery3.1.1】

PS：這里再為大家推薦幾款時間及日期相關工具供大家參考使用：

在線秒表工具：
http://tools.jb51.net/bianmin/miaobiao

在線日期/天數(shù)計算器：
http://tools.jb51.net/jisuanqi/date_jisuanqi

在線日期天數(shù)差計算器：
http://tools.jb51.net/jisuanqi/onlinedatejsq

Unix時間戳(timestamp)轉換工具：
http://tools.jb51.net/code/unixtime

更多關于jQuery相關內容感興趣的讀者可查看本站專題：《jQuery日期與時間操作技巧總結》、《jQuery擴展技巧總結》、《jQuery常見事件用法與技巧總結》、《jQuery常用插件及用法總結》、《jQuery常見經典特效匯總》及《jquery選擇器用法總結》

希望本文所述對大家jQuery程序設計有所幫助。

向AI問一下細節(jié)

免責聲明：本站發(fā)布的內容（圖片、視頻和文字）以原創(chuàng)、轉載和分享為主，文章觀點不代表本網(wǎng)站立場，如果涉及侵權請聯(lián)系站長郵箱：is@yisu.com進行舉報，并提供相關證據(jù)，一經查實，將立刻刪除涉嫌侵權內容。

AI
助
手