获取验证码倒计时优化 页面刷新实时倒计时
原文地址:http://www.cnblogs.com/HDou/p/5553424.html
实现刷新页面时,倒计时仍可正常显示,不清除记录。
思路:将当前时间记录在本地sessionStrage中,刷新时,比较当前时间和记录的时间,进行相应操作
jsp页面:
<body> <button id="getcode" value="获取验证码">获取验证码</button> </body> <script type="text/javascript"> $(function() { var btn = document.getElementById("getcode"); //调用监听 monitor($(btn)); //点击click btn.onclick = function() { //倒计时效果 getCode回调函数 获取验证码api countDown($(this), getCode); }; function getCode() { alert("验证码发送成功"); } }); </script>
js页面:
//防止页面刷新倒计时失效 /** * * @param {Object} obj 获取验证码按钮 */ function monitor(obj) { var LocalDelay = getLocalDelay(); if(LocalDelay.time!=null){ var timeLine = parseInt((new Date().getTime() - LocalDelay.time) / 1000); if (timeLine > LocalDelay.delay) { console.log("过期"); } else { _delay = LocalDelay.delay - timeLine; obj.text(_delay+"秒后重新发送"); document.getElementById("getcode").disabled = true; var timer = setInterval(function() { if (_delay > 1) { _delay--; obj.text(_delay+"秒后重新发送"); setLocalDelay(_delay); } else { clearInterval(timer); obj.text("获取验证码"); document.getElementById("getcode").disabled = false; } }, 1000); } } }; //倒计时效果 /** * * @param {Object} obj 获取验证码按钮 * @param {Function} callback 获取验证码接口函数 */ function countDown(obj, callback) { if (obj.text() == "获取验证码") { var _delay = 60; var delay = _delay; obj.text(_delay+"秒后重新发送"); document.getElementById("getcode").disabled = true; var timer = setInterval(function() { if (delay > 1) { delay--; obj.html(delay+"秒后重新发送"); setLocalDelay(delay); } else { clearInterval(timer); obj.text("获取验证码"); document.getElementById("getcode").disabled = false; } }, 1000); callback(); } else { return false; } } //设置setLocalDelay function setLocalDelay(delay) { //location.href作为页面的唯一标识,可能一个项目中会有很多页面需要获取验证码。 sessionStorage.setItem("delay_" + location.href, delay); sessionStorage.setItem("time_" + location.href, new Date().getTime()); } //getLocalDelay() function getLocalDelay() { var LocalDelay = {}; LocalDelay.delay = sessionStorage.getItem("delay_" + location.href); LocalDelay.time = sessionStorage.getItem("time_" + location.href); return LocalDelay; }
note:
1、localstorage存储对象分为两种:
① sessionStrage: session即会话的意思,在这里的session是指用户浏览某个网站时,从进入网站到关闭网站这个时间段,session对象的有效期就只有这么长。
② localStorage: 将数据保存在客户端硬件设备上,不管它是什么,意思就是下次打开计算机时候数据还在。
两者区别就是一个作为临时保存,一个长期保存。
2、(new Date().getTime()
getTime() 返回从 1970 年 1 月 1 日至今的毫秒数。
关注微信公众号:CS尼克。我们一起学习计算机相关知识
posted on 2016-08-16 16:50 shufeixue 阅读(2489) 评论(0) 编辑 收藏 举报