转自:https://blog.csdn.net/gqzydh/article/details/102797669
JS倒计时(无视页面刷新)使用localStorage
<html>
<head>
<title>JS倒计时(无视页面刷新)使用localStorage</title>
<style>
.disabled {
background: #fff;
color: #ccc;
border: solid 0px;
}
.disabled:hover {
background:none;
color: #ccc;
}
</style>
</head>
<body>
<input type="tel" placeholder="请输入手机号" name="Phone">
<a class="fasong" id="btnSend" style="cursor:pointer;">发送验证码</a>
</body>
<script src="https://cdn.bootcss.com/jquery/3.3.1/jquery.min.js"></script>
<script language="javascript">
$(function () {
//点击发送验证码
$('body').on('click', '#btnSend', function () {
$('body').off('click', '#btnSend');
LockButton('#btnSend', 60);
})
//读取localStorage
var djsendtime = localStorage.getItem("djsendtime");
if (djsendtime != undefined && !isNaN(djsendtime)) {
var now = new Date().getTime(); //当前时间戳
var locksecends = parseInt((djsendtime - now) / 1000);
if (locksecends <= 0) {
localStorage.removeItem("djsendtime", null);
} else {
LockButton('#btnSend', locksecends);
}
}
})
// 按钮倒计时
var LockButton = function (btnObjId, locksecends) {
//1.获取当前系统时间
//2.获取 locksecends 后的系统时间
//3.用 localStorage 保存到期时间
//4.每次加载后获取 localStorage中保存的时间
//5.用到期时间减去当前时间获取倒计时
var djsendtime = localStorage.getItem("djsendtime")
if (djsendtime == null || djsendtime == undefined || djsendtime == 'undefined' || djsendtime == 'null') {
var now = new Date().getTime(); //当前时间戳
var endtime = locksecends * 1000 + now; //结束时间戳
localStorage.setItem("djsendtime", endtime); //将结束时间保存到cookie
}
$(btnObjId).addClass('disabled').attr('disabled', 'disabled').text('(' + locksecends + ')秒后重新获取');
$('body').off('click', '#btnSendSMS');
var timer = setInterval(function () {
locksecends--;
$(btnObjId).text('(' + locksecends + ')秒后重新获取');
if (locksecends <= 0) {
//倒计时结束清除 localStorage值
localStorage.removeItem("djsendtime", null);
$(btnObjId).removeClass('disabled').removeAttr('disabled').text('重新获取');
$('body').on('click', btnObjId);
clearInterval(timer);
}
}, 1000);
};
</script>
</html>