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

<!-- 考試倒計時組件 --><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 防刷新考試倒計時組件內容請搜索好吧啦網以前的文章或繼續瀏覽下面的相關文章希望大家以后多多支持好吧啦網！