PHP+JavaScript怎么弄刷新繼續(xù)保持倒計時按鈕？這個問題可能是我們日常學習或工作經常見到的。希望通過這個問題能讓你收獲頗深。下面是小編給大家?guī)淼膮⒖純热?，讓我們一起來看看吧?/p>
場景：發(fā)送一個驗證碼到手機，當驗證碼發(fā)出時，會提示隔 1 分鐘之后可以再次發(fā)送。通常有這幾種方式防止惡意請求，一是再次發(fā)送之前需要輸入驗證碼，二是在指定的時間間隔之內不能再次發(fā)送。
有些網站在 1 分鐘的間隔之間之內發(fā)送按鈕的確是禁用了，但是只要刷新瀏覽器，或者通過 F12 工具修改 Button 的 disabled 屬性，在時間間隔之內仍然可以點擊按鈕。
需要在刷新的情況下仍然保持倒計時，可以在服務器端用過 SESSION 記錄點擊的時間，并且每次加載頁面的時候都去檢測當前時間和點擊時間的時間差。
測試框架使用 ThinkPHP 3.2.3
視圖文件位于：/Application/Home/View/Mail/index.html
控制器位于：/Application/Home/Controller/MailController.class.php
index.html:
Document
MailController.class.php:
重慶分公司
重慶分公司
display();
}
// 記錄時間戳
public function record_time() {
session_start();
if(IS_AJAX) {
$click_time = $_POST['click_time'];
if(isset($_SESSION['click_time']) && $click_time - $_SESSION['click_time'] < $_POST['seconds']) {
echo 0; // 防止通過 F12 修改 button 的 disabled 屬性在間隔時間之內再次點擊按鈕
} else {
$_SESSION['click_time'] = $click_time;
echo date('Y-m-d H:i:s', $click_time);
}
}
}
// 發(fā)送時間戳
public function send_time() {
session_start();
$time_diff = time() - $_SESSION['click_time'];
if(isset($_SESSION['click_time']) && $time_diff < 30) {
$diff = $_POST['seconds'] - $time_diff;
if($diff > 0) {
echo $_POST['seconds'] - $time_diff;
} else {
echo 0;
}
} else {
unset($_SESSION['click_time']);
}
}
}實現效果圖
初始狀態(tài)：
點擊按鈕：
console 中顯示的時間戳是點擊按鈕時的時間戳，通過 AJAX 發(fā)送到服務器端并且記錄在 SESSION 中
倒計時結束之前刷新頁面：
console 控制臺顯示的 12 表示距離倒計時結束還有 12 秒，通過加載頁面時的 AJAX 請求服務器，比較當前時間和 SESSION 中記錄的點擊時間（如果有）并且兩者相差的時間小于倒計時的時間，則返回剩余的時間，客戶端接受到時間后仍然保持按鈕禁用，同時從返回的時間開始倒計時。
倒計時結束：
按鈕恢復可用。
在倒計時間隔時間內通過 F12 刪除 button 的 disabled 屬性，雖然按鈕可以點擊，但是由于返回值是 0，因此不會觸發(fā)新的動作以及重新計時：
刪除屬性之前：
感謝各位的閱讀！看完上述內容，你們對PHP+JavaScript怎么弄刷新繼續(xù)保持倒計時按鈕大概了解了嗎？希望文章內容對大家有所幫助。如果想了解更多相關文章內容，歡迎關注創(chuàng)新互聯行業(yè)資訊頻道。
