快捷導(dǎo)航

Vue中用JSON實現(xiàn)刷新界面不影響倒計時

更新時間：2020年10月26日 11:00:15 作者：SmallTeddy

這篇文章主要為大家詳細介紹了Vue中用JSON實現(xiàn)刷新界面不影響倒計時，文中示例代碼介紹的非常詳細，具有一定的參考價值，感興趣的小伙伴們可以參考一下

本文實例為大家分享了Vue中用JSON實現(xiàn)刷新界面不影響倒計時的具體代碼，供大家參考，具體內(nèi)容如下

效果展示：

部分代碼

<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);
 }

重要的代碼部分