vue，javascript实现页面日期倒计时功能

日期倒计时在日常项目中还是比较常用的，活动、自动完成时间，拼团等场景比较常见，所以把自己项目中用到分享一下，具体看下方源码：
代码比较简化，方便大家参考使用：

  /**
   * 日期倒计时
   *  @param date 如：2020-08-20 18:00:00
   */
  timeCountDown(date, callback = () => {}){
    var time = '';
    const formatNumber = (n)=>{
      n = n.toString();
      return n[1] ? n : '0' + n;
    };
    const setTime = ()=>{
      const leftTime = new Date(date.replace(/\-/g, '/')) - new Date();
      if (leftTime >= 0) {
        const d = Math.floor(leftTime / 1000 / 60 / 60 / 24),
            h = Math.floor(leftTime / 1000 / 60 / 60 % 24),
            m = Math.floor(leftTime / 1000 / 60 % 60),
            s = Math.floor(leftTime / 1000 % 60);
        time = `${ d > 0 ? d + '天' : '' }${ [h, m, s].map(formatNumber).join(':') }`;
        callback(time, () => clearInterval(timer));
      } else {
        time = '已超时'
        callback(time, () => clearInterval(timer));
        return
      }
    };
    const timer = setInterval(() => {
      setTime()
    }, 1e3);
  },

使用方式：（我是vue的案例，其他的可自行修改即可）

//计算倒计时
  timeCountDown() {
     const date = "2020-08-20 18:00:00"
       this.$utils.timeCountDown(date, (value,clear)=>{
           this.countTime = value;
           this.$once('hook:beforeDestroy', clear);
       })
  },

另外一个以前写的原生js案例：多个日期时间倒计时效果

源码会持续更新到公众号，需要可以关注一下哦…