JS realizes the countdown function after sending the verification code _javascript skill

Source: Internet
Author: User

Previously shared only use JS to achieve the countdown function, later, when the test found, refresh or close the page, the countdown can not be used. Online also did not find the right solution, so I wrote a, this is an optimization version of it, can meet the refresh or reopen the Web page, the countdown can still be used

Special Note:

The valid time the cookie was originally created is 60 seconds. In other words, if you close the Web page when the countdown is 20, it will not have a countdown to it after 20 seconds. However, if the countdown to 20 o'clock, close the page, if in 20 seconds to reopen the page, there is a countdown to display.

HTML code

<input id= "Second" type= "button" value= "Free access to authentication code"/>

The operation of JS to cookies

Adds a cookie function Addcookie (name,value,expireshours) {var cookiestring=name+ "=" +escape (value) when sending a captcha; 
    Determines whether or not to set an expiration time, 0 represents the invalidation if (expireshours>0) {var date=new date () when the browser is closed; 
    Date.settime (Date.gettime () +expireshours*1000); 
  cookiestring=cookiestring+ "; expires=" + date.toutcstring (); 
} document.cookie=cookiestring; 
  //Modify the value of the cookie function Editcookie (name,value,expireshours) {var cookiestring=name+ "=" +escape (value); 
   if (expireshours>0) {var date=new date (); Date.settime (Date.gettime () +expireshours*1000); 
  Unit is millisecond cookiestring=cookiestring+ "; expires=" + date.togmtstring (); 
} document.cookie=cookiestring; 
   /////The value of the cookie obtained by name function Getcookievalue (name) {var Strcookie=document.cookie; 
   var arrcookie=strcookie.split (";"); 
    for (Var i=0;i<arrcookie.length;i++) {var arr=arrcookie[i].split ("=");
     if (arr[0]==name) {return unescape (arr[1]);
    Break 
       }else{return "";
     Break 
   } 
   } 
}
 

Primary Logical code

$ (function () {$ ("#second"). Click (function () {Sendcode ($ ("#second"));
  }); v = getcookievalue ("secondsremained");//Get Cookie value if (v>0) {settime ($ ("#second"))//Start Countdown}}//send validation code function
  Sendcode (obj) {var phonenum = $ ("#phonenum"). Val ();
  var result = Isphonenum ();
    if (result) {dopostback (' ${base}/login/getcode.htm ', backfunc1,{' Phonenum ':p honenum}); Addcookie ("secondsremained", 60,60)//Add cookie record, valid time 60s settime (obj);//Start Countdown}///Send mobile phone using AJAX to background SMS interface function DoP Ostback (Url,backfunc,queryparam) {$.ajax ({async:false, cache:false, type: ' POST ', url:url,//request
The action path Data:queryparam, Error:function () {//Request failure Handler}, success:backfunc});
  function BackFunc1 (data) {var d = $.parsejson (data);
  if (!d.success) {alert (d.msg);
    }else{//Return Validation code alert ("Analog Verification Code:" +d.msg);
  $ ("#code"). Val (d.msg);
}//Start countdown var countdown;
  function SetTime (obj) {countdown=getcookievalue ("secondsremained"); If (Countdown = 0)  
    {obj.removeattr ("disabled"); 
    Obj.val ("Free access to Verification code");
  Return 
    else {obj.attr ("disabled", true); 
    Obj.val ("Re-send (" + Countdown +) ");
    countdown--;
  Editcookie ("secondsremained", countdown,countdown+1); } settimeout (function () {settime (obj)},1000)//Every 1000 milliseconds}///Verify that the phone number is legal function isphonenum () {var phonenum = $ ("
  #phonenum "). Val (); var Myreg =/^ ((13[0-9]{1}) | ( 15[0-9]{1}) | (18[0-9]{1})) 
  +\D{8}) $/; if (!myreg.test (phonenum)) {alert (' Please enter a valid cell phone number!) 
    '); 
  return false;
  }else{return true;
 }
}

The above is the entire contents of this article, I hope you can enjoy.

Contact Us

The content source of this page is from Internet, which doesn't represent Alibaba Cloud's opinion; products and services mentioned on that page don't have any relationship with Alibaba Cloud. If the content of the page makes you feel confusing, please write us an email, we will handle the problem within 5 days after receiving your email.

If you find any instances of plagiarism from the community, please send an email to: info-contact@alibabacloud.com and provide relevant evidence. A staff member will contact you within 5 working days.

A Free Trial That Lets You Build Big!

Start building with 50+ products and up to 12 months usage for Elastic Compute Service

  • Sales Support

    1 on 1 presale consultation

  • After-Sales Support

    24/7 Technical Support 6 Free Tickets per Quarter Faster Response

  • Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.