测评计时器

src/views/evaluation/evaluDetail.vue

@@ -15,7 +15,7 @@
         <template v-if="progress==='answer'">
             <div class="content-top">
                 <span class="chapter"> {{activeIndex+1}} / {{evaluData.length}} </span>
-                <span class="countdown">-29:54</span>
+                <span class="countdown">-{{realFormatSecond(time)}}</span>
             </div>
             <template v-for="(item,index) in evaluData">
                 <div class="content-center" :key="index" v-if="activeIndex===index">
@@ -164,6 +164,8 @@ export default {
       rightNumber: 0,
       errorNumber: 0,
       rightRate: 0,
+      time: 1800,
+      timer: null,
     }
   },
   //计算属性 类似于data概念
@@ -187,6 +189,7 @@ export default {
         this.progress = 'answer'
         this.activeIndex = 0
         this.handleUserSelect()
+        this.handleTimer()
     },
     // 上一题
     handlePrev(){
@@ -203,6 +206,8 @@ export default {
         }else{
             this.progress = 'result'
             this.handleCorrect()
+            clearInterval(this.timer);
+            this.time = 1800;
         }
     },
     // 给用户选项数组赋初始值
@@ -249,11 +254,61 @@ export default {
             }
         })
         this.rightRate = Math.round(this.rightNumber/total *100 )
-    }
+    },
+    // 计时器
+    handleTimer(){
+        let this_ = this;
+        this_.timer = null;
+        this_.timer = setInterval(() => {
+            this_.time--;
+            if (this_.time === 0) {
+                clearInterval(this_.timer);
+                this_.timer = null;
+                this_.time = 1800;
+                this.progress = 'result'
+                this.handleCorrect()
+            }
+        }, 1000);
+    },
+    // 将整数转换成 时：分：秒的格式
+    realFormatSecond(value) {
+      let theTime = parseInt(value); // 秒
+      let theTime1 = 0; // 分
+      let theTime2 = 0; // 小时
+      if (theTime > 60) {
+        theTime1 = parseInt(theTime / 60);
+        theTime = parseInt(theTime % 60);
+        if (theTime1 > 60) {
+          theTime2 = parseInt(theTime1 / 60);
+          theTime1 = parseInt(theTime1 % 60);
+        }
+      }
+      let result = String(parseInt(theTime));
+      if (result < 10) {
+        result = "0" + result;
+      }
+      if (theTime1 > 0) {
+        result = String(parseInt(theTime1)) + ":" + result;
+        if (theTime1 < 10) {
+          result = "0" + result;
+        }
+      } else {
+        result = "00:" + result;
+      }
+      if (theTime2 > 0) {
+        result = String(parseInt(theTime2)) + ":" + result;
+        if (theTime2 < 10) {
+          result = "0" + result;
+        }
+      } else {
+        // result = "00:" + result;
+      }
+      return result;
+    },
   },
   //生命周期 - 创建完成（可以访问当前this实例）
   created() {
-
+    this.handleTimer()
   },
   //生命周期 - 挂载完成（可以访问DOM元素）
   mounted() {
@@ -267,7 +322,9 @@ export default {
   //生命周期-更新之后
   updated() { },
   //生命周期-销毁之前
-  beforeDestory() { },
+  beforeDestory() { 
+    clearInterval(this.timer);
+  },
   //生命周期-销毁完成
   destoryed() { },
   //如果页面有keep-alive缓存功能，这个函数会触发