标签：
现在很多页面是需要获取验证码的，但是相信很多页面是没有做这样的优化的，比如下面这个场景：
现在访问一个注册页面，页面有一个填写手机号，获取验证码的按钮，点击获取验证码按钮之后，按钮变成灰色，然后是60倒计时效果。在60S内我无法再次点击获取验证码按钮。因为按钮是灰色的，不可点击状态。
但是，如果在倒计时任然进行时我刷新一下页面，一般的页面就会全部刷新，包括倒计时效果也没有了，按钮恢复到这最初可点击状态，这其实是不符合逻辑的。按正常逻辑是，页面任然倒计时，如果我刷新页面，倒计时任然存在，并且按钮不可点击。
再有一种场景：如果在倒计时任然进行时，我关闭了页面，然后在60S内重新打开页面，按到里说60s时间还没有过完，我重新打开页面，倒计时效果应该任然存在，并且与实际流逝时间对应，也就是说，我点击按钮，倒计时进行到50s的时候，我关闭页面，然后过去40s之后我重新打开页面，倒计时效果应该进行至10s。
但是，现有很多页面是没有实现这样的逻辑的。也就是说页面刷新，倒计时就没有了，按钮又恢复了，自然是不合理不符合逻辑的，针对这样的问题我的解决方案如下。
1.点击获取验证码按钮，改变按钮为不可点击状态，进行倒计时计时器，并且实时记录倒计时秒数，以及当前时间time1。
2.页面刷新的时候监听倒计时按钮，获取倒计时秒数，以及页面关闭的时的时间time1，和当前时间time2。
3.如果当前时间与关闭页面的时间的差 小于关闭页面的倒计时秒数，倒计时任然再进行，修改按钮为倒计时样式。
核心代码如下：
getcode.js
//防止页面刷新倒计时失效 /** * * @param {Object} obj 获取验证码按钮 */ function monitor(obj) { var LocalDelay = getLocalDelay(); var timeLine = parseInt((new Date().getTime() - LocalDelay.time) / 1000); if (timeLine > LocalDelay.delay) { console.log("过期"); } else { _delay = LocalDelay.delay - timeLine; obj.text(_delay).addClass("btn-disabled"); var timer = setInterval(function() { if (_delay > 1) { _delay--; obj.text(_delay); setLocalDelay(_delay); } else { clearInterval(timer); obj.text("获取验证码").removeClass("btn-disabled"); } }, 1000); } }; //倒计时效果 /** * * @param {Object} obj 获取验证码按钮 * @param {Function} callback 获取验证码接口函数 */ function countDown(obj, callback) { if (obj.text() == "获取验证码") { var _delay = 60; var delay = _delay; obj.text(_delay).addClass("btn-disabled"); var timer = setInterval(function() { if (delay > 1) { delay--; obj.text(delay); setLocalDelay(delay); } else { clearInterval(timer); obj.text("获取验证码").removeClass("btn-disabled"); } }, 1000); callback(); } else { return false; } } //设置setLocalDelay function setLocalDelay(delay) { //location.href作为页面的唯一标识，可能一个项目中会有很多页面需要获取验证码。 localStorage.setItem("delay_" + location.href, delay); localStorage.setItem("time_" + location.href, new Date().getTime()); } //getLocalDelay() function getLocalDelay() { var LocalDelay = {}; LocalDelay.delay = localStorage.getItem("delay_" + location.href); LocalDelay.time = localStorage.getItem("time_" + location.href); return LocalDelay; }
页面调用 login.html
<script type="text/javascript" src="js/jquery-2.1.0.js"></script>
<script type="text/javascript" src="js/getcode.js"></script>
<script>
$(function() {
var btn = document.getElementById("btn-getcode");
//调用监听
monitor($(btn));
//点击click
btn.onclick = function() {
//倒计时效果 getCode回调函数 获取验证码api
countDown($(this), getCode);
};
function getCode() {
$.get("http://192.168.50.242:8080/demo/js/json.json", {}, function(res) {
if (res.code == 000) {
console.log("验证码将发送到你手机");
} else {
alert(res.message);
}
});
}
});
</script>
其实原理很简单，就是将倒计时的实时记录在localStorage中，页面刷新的时候判断localStorage的数据。
标签：
原文地址：http://www.cnblogs.com/HDou/p/5553424.html
