注：运行环境需先引入jquery
html页面：
<button id="getcode" value="获取验证码">获取验证码</button>
js页面：
/**
* @time: 2018-09-29
* @auto: yuanwang12
*/
// 防止页面刷新倒计时失效
/**
*
* @param {Object} obj 获取验证码按钮
*/
// 离开页面/刷新页面 重新运行计时器
function monitor(obj) {
debugger
var LocalDelay = getLocalDelay(); //取出来的是个对象 包含当前时间（毫秒形式）和剩余时间
if (LocalDelay.time != null) {
debugger
var timeLine = parseInt((new Date().getTime() - LocalDelay.time) / 1000); //当前北京时间（毫秒形式） - 离开页面（刷新）时刻 存储的某时刻的时间（毫秒形式） = （离开浏览器或刷新）间隔时间
if (timeLine > LocalDelay.delay) { //LocalDelay.delay：剩余时间
console.log("过期");
// 过期清除session中的数据
// sessionStorage.removeItem('delay_');
// sessionStorage.removeItem('time_');
} 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);
}
}
};
//设置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;
}
//倒计时效果
/**
*
* @param {Object} obj 获取验证码按钮
* @param {Function} callback 获取验证码接口函数
*/
function countDown(obj, callback) {
debugger
if (obj.text() == "获取验证码") {
var _delay = 20; //设置定时时间长度
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;
}
}
// 初始化
$(function () {
var btn = document.getElementById("getcode");
//调用监听
monitor($(btn));
//点击click
btn.onclick = function () {
//倒计时效果 getCode回调函数 获取验证码api
countDown($(this), getCode);
};
// 回调提示
function getCode() {
alert("验证码发送成功");
}
});
注：拷贝代码本地浏览器运行即可 如有问题 请留言 看到后会及时回答