效果展示

参数

参数 说明 类型 可选值 默认值
targetTime 目标时间 string —— ‘2021-08-12 19:44’
callback 回调函数 function —— callback(status, result){…}

代码使用

  1. <!DOCTYPE html>
  2. <html lang="en">
  3.   <head>
  4.     <meta charset="UTF-8" />
  5.     <meta name="viewport" content="width=device-width, initial-scale=1.0" />
  6.     <title>Document</title>
  7.   </head>
  8.   <body>
  9.     <!-- 6.25 -->
  10.     <div id="box">
  11.       倒计时 1小时2分钟34秒
  12.     </div>
  13.   </body>
  14.   <script src="./1.js"></script>
  15.   <script>
  16.     let time = '2020-08-11 21:05';
  17.     countDown(time, function (status, res) {
  18.       if (status === 'doing') {
  19.         box.innerHTML = `距离抢购还剩，${res.days}天${res.hours}小时${res.mintes}分${res.seconds}秒`;
  20.         return;
  21.       }
  22.       box.innerHTML = '开抢啦！～～';
  23.     });
  24.   </script>
  25. </html>

js 源码

  1. /**
  2.   * countDown
  3.   * @author rockshang 
  4.   * @date 20-08-11
  5.   * @param {
  6.     *      targetTime:  '2021-08-12 19:44',
  7.     *      callback(status, result){}
  8.     *    }
  9.     */
  10. let countDownModule = (function () {
  11.   let timer = null,
  12.     nowTime = new Date();
  13.   // 从服务器获取时间
  14.   function getServerTime(callback) {
  15.     // 异步回调函数传进来
  16.     var xhr = new XMLHttpRequest();
  17.     xhr.open('HEAD', '');
  18.     xhr.onreadystatechange = function () {
  19.       if (xhr.readyState === 2 && xhr.status == 200) {
  20.         callback(new Date(xhr.getResponseHeader('Date')));
  21.       }
  22.     };
  23.     xhr.send(null);
  24.   }
  25.   // 计算时间
  26.   function computed(targetTime, cb) {
  27.     let spanTime = new Date(targetTime) - nowTime;
  28.     if (spanTime <= 0) {
  29.       cb('done', null)
  30.       clearInterval(timer);
  31.       timer = null;
  32.       return;
  33.     }
  34.     let days = Math.floor(spanTime / (24 * 60 * 60 * 1000));
  35.     spanTime = spanTime - days * 24 * 60 * 60 * 1000;
  36.     let hours = Math.floor(spanTime / (60 * 60 * 1000));
  37.     spanTime = spanTime - hours * 60 * 60 * 1000;
  38.     let mintes = Math.floor(spanTime / (60 * 1000));
  39.     spanTime = spanTime - mintes * 60 * 1000;
  40.     let seconds = Math.floor(spanTime / 1000);
  41.     days < 10 && days !== 0 ? (days = '0' + days) : null;
  42.     hours < 10 && hours !== 0 ? (hours = '0' + hours) : null;
  43.     mintes < 10 && mintes !== 0 ? (mintes = '0' + mintes) : null;
  44.     seconds < 10 && seconds !== 0 ? (seconds = '0' + seconds) : null;
  45.     cb('doing', {
  46.       days,
  47.       hours,
  48.       mintes,
  49.       seconds
  50.     })
  51.   }
  52.   function countDown(
  53.     targetTime = '2021-08-12 19:44',
  54.     cb
  55.   ) {
  56.     getServerTime((time) => {
  57.       nowTime = time;
  58.       computed(targetTime, cb);
  59.       timer = setInterval((_) => {
  60.         nowTime = +nowTime + 1000;
  61.         computed(targetTime, cb);
  62.       }, 1000);
  63.     });
  64.   }
  65.   // 引入JS文件使用
  66.   if (typeof window !== 'undefined') {
  67.     window.countDown = countDown
  68.   }
  69.   // commonJS 导出，require导入
  70.   if (typeof module !== 'undefined' && typeof module.exports !== 'undefined') {
  71.     module.exports = countDown;
  72.   }
  73.   return countDown;
  74. })();
  76. // ES6 导出的方式，import导入 import countDown from './count.js'
  77. export default countDownModule;