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

<!-- 考試倒計時組件 --><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>

到此這篇關(guān)于Vue 封裝防刷新考試倒計時組件的實現(xiàn)的文章就介紹到這了,更多相關(guān)Vue 防刷新考試倒計時組件內(nèi)容請搜索好吧啦網(wǎng)以前的文章或繼續(xù)瀏覽下面的相關(guān)文章希望大家以后多多支持好吧啦網(wǎng)！