本文詳細的介紹了防重新整理考試倒計時元件 ，分享給大家，也給自己留個筆記，感興趣的可以瞭解下

<!-- 考試倒計時元件 -->
<template>
 <div class="time">
  <p>00:{{timerCount2}}:{{timerCount1}}</p>
  <button @click="reset">重新計時</button>
 </div>
</template>


<script>
export default {
 name: "Time",data() {
  return {
   timeSeconds: 0,timeMinutes: 0,seconds: 59,// 秒
   minutes: 1,// 分
   timer: null
  };
 },methods: {
  num(n) {
   return n < 10 ? "0" + n : "" + n;
  },// 重新計時
  reset() {
   sessionStorage.removeItem("answered");
   window.location.reload();
   localStorage.removeItem("startTime1");
   localStorage.removeItem("startTime2");
   clearInterval(this.timer);
  },// 清除
  clear() {
   localStorage.removeItem("startTime1");
   localStorage.removeItem("startTime2");
   sessionStorage.setItem("answered",1);
   clearInterval(this.timer);
  },// 倒計時
  timing() {
   let [startTime1,startTime2] = [ localStorage.getItem("startTime1"),localStorage.getItem("startTime2") ];
   let nowTime = new Date().getTime();
   if (startTime1) {
    let surplus = this.seconds - parseInt((nowTime - startTime1) / 1000);
    this.timeSeconds = surplus <= 0 ? 0 : surplus;
   } else {
    this.timeSeconds = this.seconds;
    localStorage.setItem("startTime1",nowTime); //儲存秒
   }
   if (startTime2) {
    this.timeMinutes = startTime2;
   } else {
    this.timeMinutes = this.minutes;
    localStorage.setItem("startTime2",this.minutes); //儲存分
   }
   this.timer = setInterval(() => {
    if ( this.timeSeconds == 0 && this.timeMinutes != 0 && this.timeMinutes > 0 ) {
     let nowTime = new Date().getTime();
     this.timeSeconds = this.seconds;
     localStorage.setItem("startTime1",nowTime);
     this.timeMinutes--;
     localStorage.setItem("startTime2",this.timeMinutes);
    } else if (this.timeMinutes == 0 && this.timeSeconds == 0) {
     this.timeSeconds = 0;
     this.clear();
     alert("考試時間到");
    } else {
     this.timeSeconds--;
    }
   },1000);
  }
 },mounted() {
  if (sessionStorage.getItem("answered") != 1) {
   this.timing();
  }
 },computed: {
  timerCount1() {
   return this.timeSeconds < 10 ? "0" + this.timeSeconds : "" + this.timeSeconds;
  },timerCount2() {
   return this.timeMinutes < 10 ? "0" + this.timeMinutes : "" + this.timeMinutes;
  }
 },destroyed() {
  // 退出後清除計時器
  if (this.timer) {
   clearInterval(this.timer);
  }
 }
};
</script>
<style scoped>
.time {
 color: #f72a3a;
 font-weight: bold;
 font-size: 26px;
}
</style>

到此這篇關於Vue 封裝防重新整理考試倒計時元件的實現的文章就介紹到這了,更多相關Vue 防重新整理考試倒計時元件內容請搜尋我們以前的文章或繼續瀏覽下面的相關文章希望大家以後多多支援我們！