您的位置：首页 > Web前端 > HTML5

HTML5使用localStorage实现获取验证码保存倒计时时间

2016-09-06 00:00 239 查看

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<script src="http://cdn.bootcss.com/jquery/3.1.0/jquery.js"></script></head>
<body>
<button id="btn_click">获取验证码</button>

<script>
$(function(){
//加载刷新事件
load($("#btn_click"));
//点击事件
$("#btn_click").click(function(){
time($(this));
})
})

function time(obj) {
var wait=60;
setLocalDelay(wait);
if(wait==0){
obj.attr("disabled",false);
obj.html("获取验证码")
setLocalDelay(wait);
}else{
var timer = setInterval(function() {
if (wait > 0) {
wait--;
obj.attr("disabled",true);
obj.html("剩余("+wait+")秒")
setLocalDelay(wait);
} else {
clearInterval(timer);
obj.attr("disabled",false);
obj.html("获取验证码")
}
}, 1000);
}

}
function load(obj){
//获取缓存中的值
var timers = getLocalDelay();
if(timers.lastname==null||timers.lastname==0){
obj.html("获取验证码")
return;
}
obj.html("剩余("+timers.lastname+")秒")
var timer = setInterval(function() {
if (timers.lastname > 0) {
timers.lastname--;
obj.attr("disabled",true);
obj.html("剩余("+timers.lastname+")秒")
setLocalDelay(timers.lastname);
} else {
clearInterval(timer);
obj.attr("disabled",false);
obj.html("获取验证码")
}
}, 1000);
}

function setLocalDelay(time) {
//location.href作为页面的唯一标识，可能一个项目中会有很多页面需要获取验证码。
localStorage.setItem("lastname" + location.href, time);
}

function getLocalDelay() {
var LocalDelay = {};
LocalDelay.lastname = localStorage.getItem("lastname" + location.href);
return LocalDelay;
}

</script>

</body>
</html>

内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理

标签：

相关文章推荐

新的分享

章节导航