倒計時讀秒不受頁面重新整理 關閉 跳轉影響

實現功能

前端在做登入或者註冊模組的時候可能會涉及到驗證手機號，點選獲取驗證碼按鈕後按鈕處於禁用狀態，同時顯示倒計時秒數，當秒數讀完的時候恢復按鈕原本狀態，同時在頁面重新整理後或者關閉或跳轉都不會影響讀秒。

分析：

我們要實現的有：1、點選按鈕後進行讀秒並讓按鈕處於禁用狀態；2、讀秒不受頁面變化的影響；3、讀秒結束後按鈕恢復原本狀態

思路：

1、要不受頁面影響，那就需要用到時間戳去做時間差的判斷（利用未來的某一時間與當前時間進行相減）

2、當離開當前頁面後還要進行讀秒，所以要在離開或重新整理或關閉頁面時將你設定的那個未來的某一時間戳儲存起來（這裡我用的本地儲存），在下次回到這個頁面的時候

通過讀取上次存在本地儲存時間戳的資料與當前的時間戳進行相減，如果<=0，則

恢復按鈕的狀態，否則將繼續進行讀秒

**（在vue-cli腳手架中書寫）：

結構部分：

<

input 
type
="text"
/>
<
button 
@click
="getcode()"
:disabled
="btnflag"
>
}    
button
>

data部分：

data() ;

},

首先進入獲取驗證碼這個頁面時先去判斷本地儲存裡儲存的時間戳與當前的時間戳相減的差是否<=0；

created() 

})let temp = json.parse(localstorage.getitem("reducetimestamp"));
let nowstamp = new
date().gettime();
//如果<=0說明倒計時已結束，將按鈕恢復原始狀態
if (+temp - nowstamp <= 0)  
else
},

主要函式部分：

counttime() 

this.timer = setinterval(() =>
}, 1000);
},//點選獲取驗證碼按鈕
getcode()

其實剛開始做的時候我是將時間戳的儲存那部分的**放到destroyed鉤子函式裡邊的，但是頁面直接重新整理或者直接關閉都不會觸發destroyed鉤子函式，所以這裡要借助源生的beforeunload事件幫助我們完成，詳情可以去查閱mdn文件。

總結

這個需求的核心在於去使用時間戳和監聽頁面的改變，以及使用定時器；如有錯誤，歡迎各位大佬的給出優化建議！

驗證碼倒計時，不受頁面重新整理影響

將點選時的時間存入localstorage，與現在的時間進行比較，這樣重新整理也不會影響倒計時了。var timer timer變數，控制時間 var curcount 當前剩餘秒數 function sendmessage timer處理函式 function setremaintime else...

倒計時頁面

倒計基本原理 其實就是獲取兩個時間的時間差，然後除1000換算成秒數，除60換算成分，除360換算成小時，除24 360換算成日 這個函式是當前時間距離你選定的日期 函式的引數 相差的時間 function lefttime year,month,day,hour,minute,second fun...

ajax獲取驗證碼後倒計時不受頁面關閉及重新整理影響

html部分 type button id code btn value 獲取驗證碼 js部分 獲取驗證碼 function ajax datatype json success function data else if data.error code 1 else if data.error c...