1.点击获取验证码按钮,改变按钮为不可点击状态,进行倒计时计时器,而且实时记录倒计时秒数,以及当前时间time1。javascript
2.页面刷新的时候监听倒计时按钮,获取倒计时秒数,以及页面关闭的时的时间time1,和当前时间time2。java
3.若是当前时间与关闭页面的时间的差 小于关闭页面的倒计时秒数,倒计时任然再进行,修改按钮为倒计时样式。jquery
//防止页面刷新倒计时失效 /** * * @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; }
<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>