JS Code Implementation Click button 60 seconds Countdown _javascript Tips

For example, some websites on the mobile phone message authentication function, there is a similar implementation click button, countdown 60 seconds to click again to send the effect.

This example uses JavaScript to implement the Click button, the countdown 60 seconds to click again to send the verification code function.

Example 1: Javascript Implementation Click the button countdown 60 seconds before you click the effect of sending

<input type= "button" id= "btn" value= "Free access to authentication code"/> <script "type="
>
var text/javascript;
function Time (o) {
  if (wait = = 0) {
   o.removeattribute ("Disabled");   
   O.value= "Free access to Verification code";
   Wait = n
  else { 

   O.setattribute ("disabled", true);
   O.value= "Resend (" + Wait + ")";
   wait--;
   settimeout (function () {Time
    (o)
   },
   1000)
  }
 }
document.getElementById ("btn"). Onclick=function () {time (this);}
</script>

Example 2: Click the button to appear 60 seconds Countdown JS code

 <! DOCTYPE HTML PUBLIC "-//W3C//DTD XHTML 1.0 transitional//en" "Http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd ">  
 

Example 3: Click the button, 60 seconds after the countdown can continue to click, the button can also show the countdown

Expected Effect chart:

This is the code on the micro-trust public platform.

function e () {var e = $ ("#mobile"), T = (new Date). GetTime (), n = Math.floor ((t-b)/1e3); G && cleartimeout (g ), n >= 60? (E.prop ("ReadOnly",! 1), y =! 0, $ ("#sendmobile"). HTML ("Send authentication Code"). attr ("Disabled",! 1). Removeclass ("btn_disabled")): ( E.prop ("ReadOnly",!0), y =! 1, $ ("#sendmobile"). attr ("Disabled",!0). addclass ("btn_disabled"). HTML ("after%s seconds can be sent back".
sprintf (60-n)), G = settimeout (E, 1e3)); } function S () {function E () {if (!y) return; var e = $.trim (N.val ()); L.mobile (e)? t.attr ("Disabled",! 1). Removeclass (
"Btn_disabled"): t.attr ("Disabled",!0). addclass ("btn_disabled");
var t = $ ("#sendmobile"), n = $ ("#mobile"); N.keyup (E). blur (E), E (), T.click (function () {var E; t.attr ("Disabled")!== "Disabled" && (e = "+86" + $.trim (N.Va L ()), B = (new Date). GetTime (), E (), O.post ({url:w? "/cgi-bin/formbyskey": "/acct/formbyticket", data: {form: "mobile", Action: "Set", F: "JSON", Mobile:e}, Mask:! 1}, F Unction (e) {var t = E.baseresp.ret; if (t = = 0) u.suc ("ValidationCode has been sent ");
else {switch (t) {case-13:u.err ("login timeout, please login again"); break; Case-35:u.err ("The phone has been registered 2 times, please use another mobile phone number for user information registration"); break; Default:
U.err ("Authentication code send failed");
} b = 0;
}
}));
});
 }

This piece of code is not know how to call to their own code to come up, after the expert pointing to some head search.

High man's problem-solving ideas: If strict, this should also be combined with the background to obtain time, otherwise someone else to refresh the line.
If you are not strict, you can use a cookie.

<script src= "Http://lib.sinaapp.com/js/jquery/1.7.2/jquery.min.js" ></script> <script src= "http://" Yukon12345.com/yukon12345.com/js/jquery.cookie.js "></script> <script> time1=$.cookie (" time1 ") | |
 60; Time2=$.cookie ("time2") | |
 60;
  Dis1=$.cookie ("Dis1") Dis2=$.cookie ("Dis2") function countdown ($obj) {var time;
   if ($obj. attr ("id") = = "B1") {time=--time1;
   $.cookie ("time1", time,{"Expires": 1});
    if (time<=0) {time1=60; 
  $obj [0].disabled=! $obj [0].disabled clearinterval (Inter1) $obj. Text ("Click to send") $.cookie ("Dis1", "") return}
   } if ($obj. attr ("id") = = "B2") {time=--time2;
   $.cookie ("Time2", time,{"Expires": 1});
    if (time<=0) {time1=60; 
  $obj [0].disabled=! $obj [0].disabled clearinterval (Inter2) $obj. Text ("Click to send") $.cookie ("Dis2", "") return} $obj. Text (time+ after "second Resend")} $ (function () {if (dis1= "Dis") {$ ("#b1") [0].disabled= ' disabled ' inter1=setint Erval (function () {Countdown ($ ("#b1"))},1000)} if (dis2= "Dis") {$ ("#b2") [0].disabled= ' disabled ' inter2=setinterval (function () {Countdown ($ ("#b2"))},1
 $ (". CD"). Bind ("click", Function () {$this =$ (this);
  Disables and executes the countdown if not disabled (! $this [0].disabled) {$this [0].disabled= ' disabled '; if ($this. attr ("id") = = "B1") {$.cookie ("dis1", "dis", {"Expires": 1}) Inter1=setinterval (function () {Countdown ($this)} , 1000)} if ($this. attr ("id") = = "B2") {$.cookie ("Dis2", "dis", {"Expires": 1}) Inter2=setinterval (function () {Countdow N ($this)},1000)}}) </script> <button id= "B1" class= "CD" > Click Send </button><br> <butt
 On id= "B2" class= "CD" > Click Send </button><br>

Everyone through these three examples to explain there is no point of thought, then do it, I hope to learn JavaScript program design help.