js倒计时的几种方法

第一种，简单时长倒计时

data() {
    return {
      timer: null,
      m: 0,
      s: 0,
      time: null,
    }
  },

created() {
    this.resetTime(125); //倒计时125S，根据自己的时长确定
 },


methods: {
    //单纯分钟和秒倒计时
    resetTime(time){
      this.m = Math.floor(time / 60);
      this.m = this.m < 10 ? `0${this.m}` : this.m;
      console.log('this.m--',this.m);
      this.s = Math.floor(time % 60);
      this.timer = setInterval(this.countDown,1000);
    },
    countDown(){
      this.s--;
      this.s < 10 && (this.s = '0' + this.s);
      // this.s = this.s < 10 ? `0${this.s}` : this.s;
      if(this.s.length >= 3){
        this.s = 59;
        this.m = `0${(Number(this.m)-1)}`;
      }
      if(this.m.length >= 3){
        this.m='00';
        this.s='00';
        clearInterval(this.timer);
      }
      this.time = `${this.m}分钟${this.s}秒`;
      console.log(this.m+"分钟"+this.s+"秒");
    },
}

第二种，根据后端返回的时间戳，与当前时间进去比较，进行倒计时

data() {
    return {

　　　　 timer: null,

      time: null,
    }
  },

created() {

this.timer = setInterval(this.countTime,1000);

 },

methods: {
    countTime() {
      //获取当前时间
      let date = new Date();
      let now = date.getTime();
      //设置截止时间
      let str="2021/3/15 00:00:00";
      let endDate = new Date(str);
      let end = endDate.getTime();
      //时间差
      let leftTime = end - now;
      //定义变量 d,h,m,s保存倒计时的时间
      let d,h,m,s;
      if (leftTime >= 0) {
        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);
      }else {
　　　　　clearInterval(this.timer); //为负数时清掉定时器
　　　　}

//递归每秒调用countTime方法，显示动态时间效果
      this.time = `${m}分${s}秒`;

　　　　 if(m == 0 && s == 0) {

　　　　　　clearInterval(this.timer); //时间倒计完清掉计时器，并且跳转，这里根据自己的需求写就好了

　　　　　　this.$app.$redirect('/register/invallid',true);

　　　　　}


    },
}

3、最简单的60S倒计时

data() {
    return {
      countDownTime: 60,
      timeer: null,
    }
},
codeCountDown (){  
 　　　this.timeer = setTimeout(() => {
        this.countDownTime--;
          if (this.countDownTime < 1) {
            this.countDownTime = 60;
            this.isShow = false;
            clearTimeout(this.timeer);
          } else {
            this.codeCountDown();
          }
      }, 1000);
    },和

第四种，后端接口给了起始时间和失效的时间；　

在发起倒计时的地方直接调用countdownStarts()方法就可以了，timeNum是显示倒时时还有多长时间，放在页面显示就可以；

data(){

　return {

　　tiemmer: null,

　　timeNum: '30 : 00',

　　num: 1 * 60,

　　}


　　countdownStarts() {
      //当前时间剩余
      let beginTime = this.currentTime;//后端给的时间戳，自己页面存一下
      let endTime = this.expireTime;//后端给的时间戳，自己页面存一下
　　　　if (beginTime < endTime) {
        let val = endTime - beginTime;
        this.num = val/1000;this.countDown();
      } else {
        //时间失效的处理，跳转到失效页面啥的 
      }
    },

　　countDown(){
      this.tiemmer = setInterval(() => {
        this.num--;
        this.timeNum = this.formatTime2(this.num);
        if(this.num <  1) {
          clearInterval(this.tiemmer);
          //倒计时结束后自己的一些操作处理
        }
      }, 1000);
    },

　　formatTime2(time) {
      // 转换为式分秒
      let h = parseInt(time / 60 / 60 % 24)
      h = h < 10 ? '0' + h : h
      let m = parseInt(time / 60 % 60)
        m = m < 10 ? '0' + m : m
      let s = parseInt(time % 60)
        s = s < 10 ? '0' + s : s
      // 作为返回值返回
      return `${m} : ${s}`;
    },