Vue 封装防刷新考试倒计时组件的实现
2020-06-20 11:48
736 查看
本文详细的介绍了防刷新考试倒计时组件 ,分享给大家,也给自己留个笔记,感兴趣的可以了解下
<!-- 考试倒计时组件 --> <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 防刷新考试倒计时组件内容请搜索脚本之家以前的文章或继续浏览下面的相关文章希望大家以后多多支持脚本之家!
您可能感兴趣的文章:
相关文章推荐
- 基于jQuery+Cookie实现的防止刷新的在线考试倒计时
- vue 封装组件 实现自定义双向绑定
- vue-router 如何在当前路由下重新点击当前路由的router-link实现刷新 组件重新渲染
- vue实现图片预览组件封装与使用
- 从组件封装看Vue的作用域插槽的实现
- Vue 实现手动刷新组件的方法
- Vue + Element UI 实现权限管理系统 前端篇(七):功能组件封装
- vue-cli3项目使用mint-ui 利用popup结合picker实现省市联动封装组件......
- 基于jQuery+Cookie实现的防止刷新的在线考试倒计时
- vue实现图片预览组件的封装与使用
- Vue + Element-ui实现后台管理系统(4)---封装一个ECharts组件的一点思路
- vue笔记之组件案例-实现评论的发表和自动刷新列表
- 只需5步,教你实现Vue组件封装
- 实现axios的统一封装API,axios结果格式处理,vue组件的loading动画变量在axios请求的前后改变
- echarts图表刷新:vue中传递数据给子组件,并且监听子组件中数据的变化,实现刷新echarts图表的功能
- Vue封装 swiper 组件多种方案实现
- Vue中的transition封装组件的实现方法
- vue elementui 实现搜索栏公共组件封装的实例代码
- Vue组件的两种封装方式——分别实现自定义Toast的封装
- VUE组件 之 倒计时(防刷新)