我写了一段倒计时功能的代码,同时实时把倒计时信息存入localstorage中,防止页面刷新后倒计时丢失,但现在有个问题,如果我页面一加载 window.onload就立马执行countDown()这个方法是没有问题就算刷新也可以正常执行的。
但是当countDown()是通过其他事件执行再来触发它的,而不是页面一加载进来就执行,那么当我刷新页面后countDown()这个方法便不会自动执行,也就执行不到里面的localstorage方法,那么刷新页面后倒计时就会停止了,我应该怎么来修改这段代码??把localstorage方法单独写出来暴露到最外面?让他即使是通过其他方法触发后刷新页面也能正常运行??请问该怎么写?谢谢了!
/**
* [countDown description] 倒计时功能 防止页面刷新中断
* @params obj:触发按钮$(".btn");
* @params deText:按钮未触发时的原始文本text();默认“获取验证码”;
* @params delay:倒计时秒数;
* @params callback:回调函数,执行函数内部代码最终返回true或false,默认为true;当为true时触发事件、false时停止执行;
*
*/
var countDown = function (params) {
params = params || {};
var obj = params.obj;
var deText = params.deText || "获取验证码";
var delay = params.delay || 60;
var callback = params.callback || function () {return true;};
function downProcess(obj, delay) {
obj.text("重新发送(" + delay + "s)").attr("disabled", true);
var timer = setInterval(function () {
if (delay > 1) {
delay--;
obj.text("重新发送(" + delay + "s)");
setLocalDelay(delay);
} else {
clearInterval(timer);
obj.text(deText).removeAttr("disabled");
}
}, 1000);
}
//设置 localStorage
function setLocalDelay(delay) {
//location.href作为页面的唯一标识,可能一个项目中会有很多页面需要获取验证码。
localStorage.setItem("delay_" + location.href, delay); //保存倒计时余下时间
localStorage.setItem("time_" + location.href, new Date().getTime()); //当前时间
}
//获取 localStorage
function getLocalDelay() {
return LocalDelay = {
delay: localStorage.getItem("delay_" + location.href), //获取储存的余下时间
time: localStorage.getItem("time_" + location.href) //获取储存的"当前时间"
};
}
//页面刷新后继续倒计时
var LocalDelay = getLocalDelay();
var timeLine = parseInt((new Date().getTime() - LocalDelay.time) / 1000);
if (timeLine <= LocalDelay.delay) {
var newDelay = LocalDelay.delay - timeLine;
downProcess(obj, newDelay);
}
//点击obj 如果callback返回true则触发事件
obj.click(function () {
if (callback()) {
if (obj.text() == deText) {
setLocalDelay(delay);
downProcess(obj, delay);
} else {
return false;
}
}
});
};调用方法
countDown({
obj: $(".get_captcha"),
deText: "获取验证码",
delay: 60,
callback:function(){
var phNum=$("#phone_number").val();
var reg=/^1(3|4|5|7|8)\d{9}$/;
if (!reg.test(phNum)) {
$("#phone_number").focus().blur();
return false;
}
// $.ajax({
// ...,
// success:function(){
// ...
return true;
// },
// ....
// });
}
});Copyright 2014-2025 https://www.php.cn/ All Rights Reserved | php.cn | 湘ICP备2023035733号
代码没看。你直接在localStorage里面存一个字段countdown,true:正在倒计时,false:倒计时结束。 每次刷新页面根据countdown这个字段来决定是否执行倒计时函数,倒计时结束countdown=false