» » Use javascript to achieve automatic countdown 30 seconds after the button is available

 

Use javascript to achieve automatic countdown 30 seconds after the button is available

Author: bamboo06 on 17-02-2016, 00:07, views: 3255

5
WEB development are often used to restrict user operations on the countdown form, such as within a certain period of time you want the user to read the relevant protocol information before allowing the user to continue to the next step, another example in the collection of phone verification code allows the user after a certain time (not received the case under the code) to get a verification code again. Well, today I come to tell you how to use javascript to achieve under this simple application.


Application Scenario 1: user registration information after you've read the agreement before activation button
Some sites require users to agree to the so-called registration information like user agreement, if the agreement is very important, some sites will require new registered user must have read the relevant protocol information in order to activate the Next button to submit the form. In order to allow users to read the complete protocol information (actual user has not really read we do not know), developers will design a countdown such as 30 seconds, 30 seconds later, the form submit button will be activated to take effect, the following look at how to achieve specific.
	<form action="http://www.goocode.net/" method="post" name="agree">
		<input type="submit" class="button" value="Check carefully <Terms of Service and declaration> (30)" id="agree_btn" name="agreeb">
	</form>

Suppose you have a top rest of the form, the form we have omitted, only a submit button, the button is initially unavailable when the 30-second countdown is displayed, the button will display the "I agree" and click Activate.
We use native js to achieve this effect:
var secs = 30;
document.agree.agreeb.disabled=true;
for(var i=1;i<=secs;i++) {
	window.setTimeout("update(" + i + ")", i * 1000);
}
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 = "Check carefully <Terms of Service and declaration> (" + printnr +")";
	}
}

We set the time to 30 seconds, but you can also set the time you want the button to disable, that is not clickable, then cycle 30 seconds, call update () function, and the current second countdown by contrast window.setTimeout, if the countdown has been completed it will show "I agree", and activate the button.

Application Scenario 2: the user activates the SMS channel to the user's mobile phone text messages to send a verification code for identity
Many sites authenticate users when the need to improve the security of user information, which would bind with the user's mobile phone, so they send a verification code information to mobile phone users, if the user fills in the correct verification code to submit the background, the operation was We will be successful. And send a verification code also may be due to various reasons have sent unsuccessful, not make users stop clicking Send. So developers use the countdown to deal with such problems, after the user activates the message, if you do not receive a verification code text message after 30 seconds you can be allowed to send a message.
	<form action="http://www.goocode.net/" method="post" name="myform">
		<input type="button" class="button" value="Get phone codes"  id="phone_btn" name="phone" onclick="showtime(30)">
	</form>

The above forms on a button to add an onclick event, called showtime () function.
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 resent";
	}
}

Like scene when the button is clicked, the button state is disabled by calling window.setTimeout of update_p () to display the countdown, when the countdown is completed, the button displays "re-send", then the button status is available.

Category: Javascript

Dear visitor, you are browsing our website as Guest.
We strongly recommend you to register and login to view hidden contents.
<
  • 0 Comments
  • 0 Articles
28 September 2017 06:25

Twila

Reply
  • Group: Guests
  • РRegistered date: --
  • Status:
 
Our young generation is crazy after websites and web pages. Thanks for sharing. I am actually an expert in best dissertation services and want to know more about your website.

<
  • 0 Comments
  • 0 Articles
24 November 2017 05:54

Venus

Reply
  • Group: Guests
  • РRegistered date: --
  • Status:
 
I am not Web Developer so hard to get coding in java script but hopefully it will be helpful for Developers in their project , here best someone write my essay for me online service and get more expertise in same skill. Appreciable effort in coding thanks.

<
  • 0 Comments
  • 0 Articles
18 December 2017 17:54

Allen

Reply
  • Group: Guests
  • РRegistered date: --
  • Status:
 
In order to allow users to read the complete protocol information (actual user has not really read we do not know), developers will design a countdown such as 30 seconds, 30 seconds later, the form submit button will be activated to take effect, the following look at how to achieve specific. CCNP Routing and Switching 300-101 Dumps

<
  • 0 Comments
  • 0 Articles
5 January 2018 20:58

Junaid

Reply
  • Group: Guests
  • РRegistered date: --
  • Status:
 
Web development is very difficult field for everyone and also it is required best skills and creativity. I don't have much knowledge about development but after read this post I get the unique knowledge from this post. Thanks author you share a nice topic. Visit here custom research paper writer

<
  • 0 Comments
  • 0 Articles
21 January 2018 23:26

Ahmed

Reply
  • Group: Guests
  • РRegistered date: --
  • Status:
 
Hey dear, I read your post and I am not expert for the development but I can help you. I think you should take help with Professional presentation design company because they also work on development and provide the best assistance I have personally with them.

Information
Comment on the news site is possible only within (days) days from the date of publication.