JavaScript + PHP Implementation Refresh to keep the countdown button

Scene: send a verification code to the phone, when the verification code is issued, will be prompted to send again after 1 minutes. Usually there are several ways to prevent malicious requests, one is to send the verification code before sending again, and the second is not to send again within the specified time interval.

Some websites are sent within a 1 minute interval between the Send button is indeed disabled, but as long as the browser refresh, or through the F12 tool to modify the button's disabled property, within the time interval can still click the button.

Need to keep the countdown in the case of refresh, you can use the server side to record the time of the click, and each time you load the page to detect the current time and the time difference between clicks.

The test framework uses thinkphp 3.2.3

View files are located in:/application/home/view/mail/index.html

Controller at:/application/home/controller/mailcontroller.class.php

Index.html:

<! DOCTYPE html>
MailController.class.php:
<?phpnamespace home\controller;use Think\controller;class Mailcontroller extends Controller {public Function index ( ) {$this->display ();} Record timestamp 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;//prevent modifying BU by F12 Tton disabled property is clicked again within the interval time} else {$_session[' click_time '] = $click _time;echo date (' y-m-d h:i:s ', $click _time);}}} Send timestamp public function send_time () {session_start (); $time _diff = time ()-$_session[' Click_time '];if (isset ($_session[ ' Click_time ']) && $time _diff <) {$diff = $_post[' seconds ')-$time _diff;if ($diff > 0) {echo $_post[' Secon DS ']-$time _diff;} else {echo 0;}} else {unset ($_session[' click_time ');}}}
　　
Realize
Initial state:
Click the button:
The timestamp displayed in the console is the timestamp when the button is clicked, sent to the server side by AJAX and recorded in the SESSION
Refresh the page before the countdown is over:
The console console displays 12 for 12 seconds from the end of the countdown, and then returns the remaining time by comparing the current time with the time recorded in the SESSION (if any) and when the time between the clicks (if any) is less than the countdown time by loading the page with the AJAX request server. The client remains the button disabled after accepting the time, and the countdown starts at the time it returns.
Countdown End:
button recovery is available.
Delete the button's disabled property through F12 during the countdown interval, although the button can be clicked, but because the return value is 0, the new action is not triggered and the timing is not renewed:
Before deleting an attribute:
JavaScript + PHP Implementation Refresh to keep the countdown button