<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> </head> <body> <input type="button" id="btn" value="免费获取验证码" onclick="settime(this)" /> <script type="text/javascript"> var countdown = 60; function settime(obj) { if (countdown == 0) { obj.removeAttribute("disabled"); obj.value = " Get verification code for free " ; countdown = 60; return; } else { obj.setAttribute("disabled", true); obj.value = " resend( " + countdown + " ) " ; countdown--; } setTimeout(function() { settime(obj) } ,1000) } </script> </body> </html>
This is just a relatively simple implementation (the page refresh will fail, but there is also one that ignores the page refresh)
< input id = "second" type = "button" value = "Get verification code for free" />
//Add cookie when sending verification code function addCookie(name,value,expiresHours){ var cookieString=name+"="+escape(value); //Determine whether to set the expiration time, 0 means it will be invalid when the browser is closed if(expiresHours>0){ var date=new Date(); 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); //The unit is milliseconds cookieString=cookieString+";expires=" + date.toGMTString(); } document.cookie=cookieString; } //Get the value of the cookie based on the 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; } } }
main logic code
$(function(){
$("#second").click(function (){
sendCode($("#second"));
});
v = getCookieValue("secondsremained");//Get cookie value
if(v>0){
settime($("#second"));//Start the countdown
}
})
//Send the verification code
function sendCode(obj){
var phone = $("#phonenum").val();
var result = isPhoneNum ();
if(result){
doPostBack('${base}/login/getCode.htm',backFunc1,{"phonenum":phonenum});
addCookie("secondsremained",60,60);//Add cookie record, valid for 60s
settime(obj);//Start the countdown
}
}
//Submit the mobile phone to the background texting interface using ajax
function doPostBack(url,backFunc,queryParam) {
$.ajax({
async : false,
cache : false,
type : 'POST',
url : url, // the action path of the request
data:queryParam,
error : function() {// request failure handler
},
success : backFunc
});
}
function backFunc1(data){
var d = $ .parseJSON (data);
if(!d.success){
alert(d.msg);
}else{//Return the verification code
alert("Simulation 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("Get verification code for free");
return;
} else {
obj.attr("disabled", true);
obj.val("Resend(" + countdown + ")");
countdown--;
editCookie("secondsremained",countdown,countdown+1);
}
setTimeout(function() { settime(obj) },1000) //execute every 1000 milliseconds
}
//check if the phone number is valid
function isPhoneNum(){
var phone = $("#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 mobile number!');
return false;
}else{
return true;
}
}
Reference link: https://www.oschina.net/code/snippet_2001568_48311