美文网首页
vue 中多个定时器

vue 中多个定时器

作者: 兜兜里冒糖糖 | 来源:发表于2019-04-02 16:27 被阅读0次
methods:{
// 封装时分秒
    time(data) {
      let today = new Date().getTime();
      let hours = parseInt((data / 1000 / 60 / 60) % 24);
      let minutes = parseInt((data / 1000 / 60) % 60);
      let seconds = parseInt((data / 1000) % 60);
      hours = hours < 10 ? "0" + hours : hours;
      minutes = minutes < 10 ? "0" + minutes : minutes;
      seconds = seconds < 10 ? "0" + seconds : seconds;
      return {
        time: hours + ":" + minutes + ":" + seconds,
        hours,
        minutes,
        seconds
      };
    },
    // 单个倒计时
    countDown(data) {
      data -= 1000;
      this.hours = this.time(data).hours;
      this.minutes = this.time(data).minutes;
      this.seconds = this.time(data).seconds;
      this.timerOne = this.hours + ":" + this.minutes + ":" + this.seconds;
      let timer = setTimeout(() => {
        this.countDown(data);
      }, 1000);
      if (data < 0) {
        clearTimeout(timer);
      }
    },
    // list中的每场倒计时
    everyCountDown(list) {
      setInterval(() => {
        list.forEach((v, i) => {
          list[i].time-= 1000;
          list[i].newTime= this.time(v.time).time;
        });
      }, 1000);
    },
}

然后在接口返回成功的时候调取

// 方案售卖倒计时定时器
if(res.status==1){
 if (this.time > 0) {
    this.countDown(this.time);
  }
 this.everyCountDown(this.detail.matchs);
}

相关文章

网友评论

      本文标题:vue 中多个定时器

      本文链接:https://www.haomeiwen.com/subject/mjbgbqtx.html