JS automatic countdown 30 seconds before the button is available (two scenarios) _ javascript skills

In WEB application development, we often see that the countdown restricts the user's operations on the form. We hope that the user can continue the next operation only after reading the protocol information within the specified time, this article uses two scenarios to analyze js to achieve an automatic countdown of 30 seconds before the button is available. Come and learn it:

In WEB development, countdown is often used to restrict user operations on the form. For example, if you want to finish reading the relevant protocol information within a certain period of time, you can continue the next step, for example, when receiving a mobile phone verification code, you can obtain the verification code again after a certain period of time (without receiving the verification code. Today I will introduce how to use Javascript to implement this simple application.

View demo download source code

Application Scenario 1: The activation button can be activated only after the user has read the relevant agreement information during registration.

Some websites require users to agree to the so-called User Agreement and other information when registering. If the content of the agreement is very important, some websites require new registered users to read the relevant agreement information before activating the next button to submit the form. To enable the user to read the protocol information (whether the user actually reads the information is unknown), the developer will design a countdown, for example, 30 seconds. After 30 seconds, the form submission button will be activated and take effect, the following describes how to implement it.

Assume that there is a form like above, and the rest of the form is omitted. There is only one submit button, and the button is unavailable at the beginning. When the 30-second countdown is over, the "I agree" button is displayed, and you can click "Activate.

We use native 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 check carefully
 <服务条款和声明>
  
("+ Printnr +") ";}} script
 

We set the time to 30 seconds. Of course, you can also set the time you want, disable the button, that is, do not click, and then cycle for 30 seconds, through the window. setTimeout calls the update () function to compare the current second with the countdown. If the countdown is complete, "I agree" is displayed and the button is activated.

Application Scenario 2: The user activates the SMS and sends a verification code text message to the user's mobile phone for verification.

Many websites need to improve the security of user information when verifying user identities. This will be bound to the user's mobile phone, so they will send verification code information to the user's mobile phone, if you have entered the correct verification code and submitted it to the background, the operation will be successful. The sending of verification codes may fail due to various reasons, and users cannot keep clicking to send the verification codes. In this way, developers use countdown to deal with such problems. After activating the text message, if the user does not receive the verification code text message 30 seconds later, they can click to send the text message.

The preceding 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 before resending";} script

Similar to scenario 1, when a button is clicked, the status of the button is disabled.Window. setTimeoutOfUpdate_p ()The countdown is displayed. After the countdown is complete, the button displays "resend", and the button status is available.

The above two scenarios show you that the button is available after the automatic countdown of js is 30 seconds. I hope this will help you.