vue 寫倒計時

vue 寫倒計時


在用vue的遇到一個問題就是一個頁面裏面有倒計時的時候,刷新頁面會從新倒計時,爲了不讓計時器從新倒計時。想到了一個方法。

原理時這樣的,吧獲取的當前時間的,加上要倒計時的時間存到localStorage中,也就是說獲取到倒計時結束的時間,存到localStorage中,在用的時候是以結束時間爲基礎的,廢話不多說直接上代碼

 	data() {
      return {
        time: '',
      }
    },
	created() {
      this.endTime();
    },
    methods: {
      //倒計時
      endTime() {
        let endingTime = new Date().getTime() + 30 * 60 * 1000;
        let num = localStorage.getItem("endingTime");
        if (localStorage.getItem("endingTime")) {
          let diff = num - new Date().getTime();
          if (diff <= 0) {
            localStorage.removeItem('endingTime');
          } else {
            let m = Math.floor(diff / 1000 / 60);
            let s = Math.floor(diff / 1000 - m * 60);
            this.countDown(m, s);
            let s2 = s < 10 ? ('0' + s) : s;
            this.time = m + '分' + s2 + '秒';
          }
        } else {
          this.countDown(30, 0);
          this.time = 29 + '分' + 60 + '秒';
          localStorage.setItem("endingTime", endingTime)
        }
      },
      //倒計時
      countDown(munite, second) {
        let m = munite;
        let s = second;
        let m2, s2;
        let _this = this;
        let tiem = setInterval(function () {
          s--;
          if (s < 0) {
            s = 60;
            m--;
            if (m < 0) {
              localStorage.removeItem('endingTime');
              _this.time = '00分00秒';
              clearTimeout(tiem);
              return;
            }
          }
          m2 = m < 10 ? '0' + m : m;
          s2 = s < 10 ? ('0' + s) : s;
          _this.time = m2 + '分' + s2 + '秒';
        }, 1000)
      },
     }

這樣就不會在頁面刷新的時候從新計時了

發表評論
所有評論
還沒有人評論,想成為第一個評論的人麼? 請在上方評論欄輸入並且點擊發布.
相關文章