关于前端:vue实现倒计时的两种方法

办法一：
<template>
<div> 残余领取工夫：{{count}}</div>
</template>
<script>
export default {

data() {
    return {
        count: '', // 倒计时
        seconds: 864000 // 10 天的秒数
    }
},
mounted() {this.Time() // 调用定时器
},
methods: {
    // 天 时 分 秒 格式化函数
    countDown() {let d = parseInt(this.seconds / (24 * 60 * 60))
        d = d < 10 ? "0" + d : d
        let h = parseInt(this.seconds / (60 * 60) % 24);
        h = h < 10 ? "0" + h : h
        let m = parseInt(this.seconds / 60 % 60);
        m = m < 10 ? "0" + m : m
        let s = parseInt(this.seconds % 60);
        s = s < 10 ? "0" + s : s
        this.count = d + '天' + h + '时' + m + '分' + s + '秒'
    },
    // 定时器没过 1 秒参数减 1
    Time() {setInterval(() => {
            this.seconds -= 1
            this.countDown()}, 1000)
    },
}

}
</script>
工夫的秒数能够依据本人的需要进行批改

再为大家分享一段代码：vue 时分秒倒计时
countTime: function () {

    // 获取以后工夫
    var date = new Date();
    var now = date.getTime();
    // 设置截止工夫
    var endDate = new Date("2018-10-22 23:23:23");
    var end = endDate.getTime();
    // 时间差
    var leftTime = end - now;
    // 定义变量 d,h,m,s 保留倒计时的工夫
    if (leftTime >= 0) {d = Math.floor(leftTime / 1000 / 60 / 60 / 24);
                this.h = Math.floor(leftTime / 1000 / 60 / 60 % 24);
                this.m = Math.floor(leftTime / 1000 / 60 % 60);
                this.s = Math.floor(leftTime / 1000 % 60);
     }
      console.log(this.s);
      // 递归每秒调用 countTime 办法，显示动静工夫成果
        setTimeout(this.countTime, 1000);

}

办法二
1 首先，是两个 div 用来显示咱们的残余领取工夫
<div style=”font-size: 14px;color: #666;”> 残余领取工夫（超时主动敞开）</div>
<div class=”time”> {{min}} 分钟 {{sec}}秒 </div>
2 而后，是倒计时函数 countdown
// 倒计时
countdown () {

  const end = Date.parse(new Date('2020-05-05 03:59:23'))
  const now = Date.parse(new Date())
  const msec = end - now

  console.log(msec)
  if(msec<0) return;

  let day = parseInt(msec / 1000 / 60 / 60 / 24)
  let hr = parseInt(msec / 1000 / 60 / 60 % 24)
  let min = parseInt(msec / 1000 / 60 % 60)
  let sec = parseInt(msec / 1000 % 60)
  this.day = day
  this.hr = hr > 9 ? hr : '0' + hr
  this.min = min > 9 ? min : '0' + min
  this.sec = sec > 9 ? sec : '0' + sec
  const that = this
  if(min>=0 && sec>=0){
    // 倒计时完结敞开订单
    if(min==0 && sec==0){return}
    setTimeout(function () {that.countdown()
    }, 1000)
  }
}

3 最初，在 mounted 里当时执行 countdown 办法
mounted () {
this.countdown()
}