JavaScript + PHP Implementation Refresh to keep the countdown button

Source: Internet
Author: User
Tags diff echo date

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


<! DOCTYPE html>


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



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

Contact Us

The content source of this page is from Internet, which doesn't represent Alibaba Cloud's opinion; products and services mentioned on that page don't have any relationship with Alibaba Cloud. If the content of the page makes you feel confusing, please write us an email, we will handle the problem within 5 days after receiving your email.

If you find any instances of plagiarism from the community, please send an email to: and provide relevant evidence. A staff member will contact you within 5 working days.

A Free Trial That Lets You Build Big!

Start building with 50+ products and up to 12 months usage for Elastic Compute Service

  • Sales Support

    1 on 1 presale consultation

  • After-Sales Support

    24/7 Technical Support 6 Free Tickets per Quarter Faster Response

  • Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.