Effects such as: Click the button appears 60 seconds countdown, 60s button is not available, countdown to time before you can click to get.
There is also a knowledge point, only the input and button such as the table cell has the Disbale property, how to set whether the method of the available properties is generally used $ ("#id"). attr (' disbaled ', ' true ') and $ ("#id"). Prop (' Disbaled ', ' false '), this method does not work for a Disbale attribute such as span IMG, which can be used when $ ("#id") is available. SetAttribute (' onclick ', function ()) or $ ("#id") The. RemoveAttribute ("onclick") method to set whether the event is available.
Here is all the code, which you can copy to use:
1 <!DOCTYPE HTML>2 <HTML>3 <Head>4 <title>Verification Code Countdown</title>5 <Scripttype= "Text/javascript"src= "Http://apps.bdimg.com/libs/jquery/2.1.4/jquery.min.js"></Script>6 <styletype= "Text/css" >7 . Validate-div input{8 width:130px;9 float: Left;Ten Line-height:30px; One } A . Validation{ - float: Left; - width:85px; the Background-color:#2eaef1; - Border-radius:5px; - Margin-left:20px; - text-align:Center; + Margin-top:3px; - } + . Validation span{ A Color:#fff; at Line-height:30px; - font-size:14px; - } - </style> - </Head> - in <Body> - <Divclass= "Validate-div"> to <inputtype= "text"class= "Validation-code"ID= "Validation-code"name= "Smscode"placeholder= "Enter Verification Code" > + <Divclass= "Validation"> - <spanclass=""ID= "Validate_span"onclick= "sendsms (this);">Get Verification Code</span> the </Div> * </Div> $ </Body>Panax Notoginseng </HTML> - the <Scripttype= "Text/javascript"> + //To send a CAPTCHA function A functionsendsms (e) { the /*Send verification code function*/ + Countdown (e); //If the verification code is sent successfully, the countdown function is called - } $ //Countdown function $ var Time= Ten; - functionCountdown (e) { - if( time== 0) { the //e.setattribute (' disabled ', false); This method is not valid for span labels that do not have a disbaled attribute - E.setattribute ("onclick","sendsms (This)");Wuyi $("#validate_span"). HTML ("Get Verification Code"); the Time= Ten; - }Else{ Wu //e.attr (' disabled ', true); This method is also invalid for span labels that do not have a disbaled attribute - //E.setattribute ("onclick", "); It's also possible to write About E.removeattribute ("onclick"); $ $("#validate_span"). HTML ("Resend (" + Time+ ")"); - Time--; - SetTimeout (function() { - sendsms (e) A }, +) + } the } - </Script> $ </Body> the </HTML>
JS Implementation 60s Countdown (pro-Test effective), and the span tag how to use and disable the OnClick event