本文例項為大家分享了Vue中用JSON實現重新整理介面不影響倒計時的具體程式碼，供大家參考，具體內容如下

效果展示：

部分程式碼

<el-form-item style="overflow:hidden" v-if="env === 'dev'">
 <el-input style="width:180px; float:left" v-model="ruleForm.nucCode" size="small" placeholder="請輸入簡訊驗證碼" />
 <el-button class="message_btn" @click="getNumCode">
 <span v-if="isShowNucTime" style="font-size:16px" >{{Nuc_time}} S</span>
 <span v-else-if="!isShowNucTime && NucAgain" >重新獲取驗證碼</span>
 <span v-else style="color:#7fbfff" >獲取簡訊驗證碼</span>
 </el-button>
</el-form-item>

isShowNucTime:boolean = false;
NucAgain: boolean = false;
Nuc_code_freash: boolean = false; // 判斷驗證碼是否過期
Nuc_time: number = 60;
end_time: number = 0;

private getCode() {
 let clicktime = new Date().getTime() + 60000;
 // 本地儲存
 localStorage.setItem('myEndTime',JSON.stringify(clicktime));
 this.timeDown(clicktime);
 }

 // 驗證碼倒計時
 timeDown(counttime: any) {
 // 判斷是否正在倒計時
 if (this.isShowNucTime) return;
 this.userChange = false;
 this.isShowNucTime = true;
 this.isGetNucCode = true;
 this.end_time = Number(localStorage.getItem('myEndTime'));
 this.Nuc_time = Math.ceil((this.end_time - new Date().getTime()) / 1000);
 let interval = setInterval(() => {
 this.Nuc_time--;
 if (this.Nuc_time < 1) {
 this.Nuc_time = 60;
 this.isShowNucTime = false;
 localStorage.removeItem('myEndTime');
 if (!this.userChange) {
 this.NucAgain = true;
 }
 clearInterval(interval);
 }
 },1000)
 }

private created(): void {
 let myEndTime= localStorage.getItem('myEndTime');
 myEndTime && this.timeDown(myEndTime);
 }

重要的程式碼部分

實現原理

1.首次載入頁面 點選開始

1）.獲取當前時間戳與要倒計時的時間相加獲得要停止計時的時間

2）.用localStorage儲存當前時間戳

3）.通過js的setInterval定時器進行倒計時

4）.當倒計時結束後 清除localStorage中儲存的結束時間

2.當第n次進入頁面或重新整理頁面時

1）.首先判斷localStorage中倒計時是否結束

2）.沒有結束則繼續倒計時

3）.如果結束則顯示重新發送驗證碼

• 主要運用了localStorage + new Date().getTime()
• PS：本文只是展示部分程式碼，一味的複製貼上並不能執行，還是搞清楚邏輯自己實現比較靠譜！

關於vue.js元件的教程，請大家點選專題vue.js元件學習教程進行學習。

更多vue學習教程請閱讀專題《vue實戰教程》

以上就是本文的全部內容，希望對大家的學習有所幫助，也希望大家多多支援我們。