我写了一段倒计时功能的代码,同时实时把倒计时信息存入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_"优艾设计网_PS论坛 + 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; // }, // .... // }); } });
精彩评论