JS Automatic countdown 30 seconds after the button is available (two kinds of scenes) _javascript skills

Show Effect Chart:

The countdown is often used in web development to limit the user's actions to the form. For example, want users to read the relevant protocol information in a certain period of time to allow users to continue the next step, such as in the collection of mobile phone verification code to allow users after a certain period of time (without receiving the verification code in the case) to obtain the verification code again. So today I'd like to show you how to use JavaScript to implement this simple application.

View Demo Download source code

Scenario 1: When the user registers, read the relevant protocol information before activating the button

Some Web site registration requires users to agree with the so-called user Agreement, such as information, if the content of the agreement is very important, some sites will require the newly registered users must read the relevant protocol information to activate the Next button to submit the form. In order to allow users to read the protocol information (the actual user has not really read I do not know), the developer will design a countdown such as 30 seconds, 30 seconds later, the form submission button will be activated, the following to see how the specific implementation.

<form action= "http://www.jb51.net/" method= "POST" name= "Agree" > 
 <input type= "Submit" class= "button" Value= "Please look carefully < terms and conditions of Service > ()" Name= "Agreeb" > 

Assuming that there is such a form, the rest of the form is omitted, only a submit button, the initial button is not available, when the 30-second countdown is displayed, the button will show "I agree" and can be clicked to activate.

We use the raw JS to achieve this effect:

<script> 
var secs =; 
Document.agree.agreeb.disabled=true; 
for (Var i=;i<=secs;i++) { 
 window.settimeout ("Update" + i + ")", I *); 
} 
function Update (num) { 
 if (num = secs) { 
 Document.agree.agreeb.value = "I agree"; 
 Document.agree.agreeb.disabled=false; 
 } 
 else { 
 var printnr = secs-num; 
 Document.agree.agreeb.value = "Please carefully review < Terms of service and declaration > (" + Printnr + ")"; 
 } 
 

We set the time to 30 seconds, of course, you can also set the time you want, the button is disabled, that is, not clickable, and then cycle 30 seconds, through the window.settimeout call Update () function, the current seconds and Countdown, if the countdown is completed then show "I Agree", and activate the button.

Application Scenario 2: The user activates the SMS channel to send the authentication code SMS to the user's mobile phone The Ming

Many sites in the authentication of users need to improve the security of user information, which will be binding with the user's mobile phone, so will send the user's mobile phone authentication code information, if the user filled out the correct code to submit a background, then the operation will be successful. and send the verification code may because of various reasons have sent unsuccessful situation, and can not allow users to constantly click to send. So the developer uses the countdown to deal with this kind of problem, the user activates the text message, if after 30 seconds did not receive the authentication code text message can again allow clicks to send the text message.

<form action= "http://www.jb51.net/" method= "post" name= "MyForm" > <input type= "button" 
 class= "button" Value= "Get Cell phone authentication code" name= "Phone" onclick= "Showtime ()" > 

The above form adds an OnClick event to the button and calls the Showtime () function.

<script> 
function Showtime (t) { 
 document.myform.phone.disabled=true; 
 for (i=;i<=t;i++) { 
 window.settimeout ("Update_p" ("+ i +", "+t+") ", I *); 
 } 
 
} 
function Update_p (num,t) { 
 if (num = = t) { 
 document.myform.phone.value = "Resend"; 
 Document.myform.phone.disabled=false; 
 } 
 else { 
 Printnr = t-num; 
 Document.myform.phone.value = "(+ Printnr +) seconds after resend"; 
 } 
} 

As with scene 1, when the button state is disabled when the button is clicked, the update_p () display the countdown by calling Window.settimeout , and when the countdown is complete, the button displays "Resend", when the button status is available.

Above through two scenarios to show you the JS implementation of automatic countdown 30 seconds after the button is available, I hope to help.