采用通过添加Cookie的方式实现页面刷新后倒计时仍有效,亲测有效!
1.Html部分:
//导入JS文件
<script type="text/javascript" src="../js/jquery.min.js"></script>
<script type="text/javascript" src="../js/jquery.js"></script>
<script src="http://cdn.bootcss.com/jquery-cookie/1.4.1/jquery.cookie.js"></script>
<div class="cj-text"><label>手机号码<b>* </b></label><input name="" type="text" id="mobile"></div>
<div class="cj-text reg-dx"><label>短信验证码<b>* </b></label><input class="reg-dx-t" name="" type="text" id="mobileYzm">
<input type="button" class="reg-dx-hq" id="btnYZM" onclick="getYZM()" value="点击获取验证码" />
</div>
2.JS代码部分:
//发送验证码时添加cookie
function addCookie(name,value,expiresHours){
//判断是否设置过期时间,0代表关闭浏览器时失效
if(expiresHours>0){
var date=new Date();
date.setTime(date.getTime()+expiresHours*1000);
$.cookie(name, escape(value), {expires: date});
}else{
$.cookie(name, escape(value));
}
}
//修改cookie的值
function editCookie(name,value,expiresHours){
if(expiresHours>0){
var date=new Date();
date.setTime(date.getTime()+expiresHours*1000); //单位是毫秒
$.cookie(name, escape(value), {expires: date});
} else{
$.cookie(name, escape(value));
}
}
//根据名字获取cookie的值
function getCookieValue(name){
return $.cookie(name);
}
//加载页面时获取Cookie并判断
$(document).ready(function(){
var obj1 = $("#btnYZM");
v = getCookieValue("secondsremained");//获取cookie值
if(v>0){
settime(obj1);//开始倒计时
}
});
//定义倒计时变量
var countdown;
//点击函数
function getYZM() {
var mobile = $("#mobile").val();
var obj = $("#btnYZM");
if (mobile) {
addCookie("secondsremained", 60, 60);//添加cookie记录,有效时间60s
settime(obj);//开始倒计时
}
}
// 倒计时函数
function settime(obj) { //发送验证码倒计时
countdown=getCookieValue("secondsremained");
if (countdown === "0") {
obj.attr('disabled',false);
//obj.removeattr("disabled");
obj.val("点击获取验证码");
return;
} else {
obj.attr('disabled',true);
obj.val("重新发送(" + countdown + ")");
countdown--;
editCookie("secondsremained",countdown,countdown+2);
}
setTimeout(function() {
settime(obj) }
,1000)
}