The Jquery.cookie.js plug-in allows you to quickly "click to obtain the authentication code after 60 seconds to prevent regain (anti-refresh)" function
Effect Chart:
First to the official website (http://plugins.jquery.com/cookie/) Download cookie plugin, put to the appropriate folder, the code is as follows:
Copy Code code as follows:
<! DOCTYPE html>
<meta charset= "Utf-8" >
<meta http-equiv= "x-ua-compatible" content= "ie=edge,chrome=1" >
<title>Examples</title>
<meta name= "description" content= "" >
<meta name= "keywords" content= "" >
<script src= "Http://apps.bdimg.com/libs/jquery/1.11.1/jquery.min.js" ></script>
<script src= "Jquery.cookie.js" ></script>
<style type= "Text/css" >
* {margin:0; padding:0 font-family: "Microsoft Yahei";}
. captcha-box {width:360px; height:34px margin:30px; padding:30px; border: #956E6F 1px dashed; border-radius:5px; BAC Kground-color: #FAF2F2;}
#mobile {float:left width:180px; height:32px border: #e5e5e5 1px solid; line-height:32px; text-indent:8px; outline : none;
#getting {float:left; height:34px; Margin-left: -1px; padding:0 18px; text-align:center; line-height:34px; border: #e5e5e5 1px solid; Background:linear-gradient (0deg, #f4f2f2 0, #fbf9f9 100%); Cursor:pointer Outline:none;}
</style>
<script>
$ (function () {
/* Imitation refresh: Detect presence of cookie*/
if ($.cookie ("Captcha")) {
var count = $.cookie ("Captcha");
var btn = $ (' #getting ');
Btn.val (count+ ' seconds can be retrieved '). attr (' disabled ', true). CSS (' cursor ', ' not-allowed ');
var resend = setinterval (function () {
count--;
if (Count > 0) {
Btn.val (count+ ' seconds can be retrieved '). attr (' disabled ', true). CSS (' cursor ', ' not-allowed ');
$.cookie ("Captcha", Count, {path: '/', Expires: (1/86400) *count});
}else {
Clearinterval (Resend);
Btn.val ("Get Authentication Code"). Removeclass (' disabled '). Removeattr (' disabled style ');
}
}, 1000);
}
/* Click to change the button state, has been abbreviated AJAX send SMS Verification code * *
$ (' #getting '). Click (function () {
var btn = $ (this);
var count = 60;
var resend = setinterval (function () {
count--;
if (Count > 0) {
Btn.val (count+ "seconds can be retrieved after");
$.cookie ("Captcha", Count, {path: '/', Expires: (1/86400) *count});
}else {
Clearinterval (Resend);
Btn.val ("Get Authentication Code"). Removeattr (' disabled style ');
}
}, 1000);
Btn.attr (' disabled ', true). CSS (' cursor ', ' not-allowed ');
});
});
</script>
<body>
<div class= "Captcha-box" >
<input type= "text" id= "mobile" maxlength= "one" placeholder= "Please enter your mobile phone number" >
<input type= "button" id= "getting" value= "Get Authentication Code" >
</div>
</body>
The above is the entire content of this article, I hope you can enjoy.