下面是详细讲解“JS实现发送短信验证后按钮倒计时功能(防止刷新倒计时失效)”的完整攻略。
我们要实现的功能是：在用户点击发送短信验证码按钮后，按钮变为不可点击状态，同时开始显示倒计时，直到倒计时结束后按钮恢复可点击状态。
为了防止用户在倒计时过程中刷新页面导致倒计时失效，我们需要使用浏览器的本地存储(localStorage/sessionStorage)来保存倒计时开始时间，页面刷新后可以根据存储的时间计算出倒计时的剩余时间，从而保证倒计时能够正确恢复。
<button id="send-code-btn">发送验证码</button>
function countdown(seconds) {
var timer = setInterval(function() {
var btn = document.getElementById('send-code-btn');
seconds--;
if (seconds === 0) {
clearInterval(timer);
btn.innerHTML = '发送验证码';
btn.disabled = false;
localStorage.removeItem('startTime');
} else {
btn.innerHTML = '重新发送(' + seconds + ')';
}
}, 1000);
}
这个函数负责处理倒计时功能，传入参数seconds表示倒计时的总秒数。在函数内，使用setInterval函数每隔一秒钟更新一次倒计时的状态，直到倒计时结束。结束后清除计时器，同时将按钮文字设置为‘发送验证码’，按钮状态设置为可点击，从localStorage中删除存储的开始时间。
var btn = document.getElementById('send-code-btn');
btn.addEventListener('click', function() {
var now = Date.now();
var startTime = localStorage.getItem('startTime');
if (startTime && now - startTime < 60 * 1000) {
alert('请勿频繁发送验证码');
} else {
localStroage.setItem('startTime', now);
btn.disabled = true;
countdown(60);
// 发送短信验证码的代码
}
});
这段代码负责绑定按钮的点击事件，并判断是否可以发送验证码。如果上一次发送验证码的时间距离当前时间不足60秒，那么弹出提示‘请勿频繁发送验证码’。否则，将当前时间存入localStorage中，按钮状态设置为不可点击，调用countdown函数开始倒计时操作，并执行发送短信验证码的代码。
var btn = document.getElementById('send-code-btn');
var startTime = localStorage.getItem('startTime');
if (startTime) {
var now = Date.now();
var seconds = Math.floor((60 * 1000 - (now - startTime)) / 1000);
if (seconds > 0) {
btn.innerHTML = '重新发送(' + seconds + ')';
btn.disabled = true;
countdown(seconds);
} else {
localStorage.removeItem('startTime');
}
} else {
btn.innerHTML = '发送验证码';
}
这段代码负责在页面刷新后判断是否存在倒计时未结束的情况，如果存在，则根据存储的开始时间计算出剩余时间，调用countdown函数开始倒计时操作，并将按钮状态设置为不可点击。如果不存在倒计时未结束的情况，则将按钮状态初始化为可点击状态。
<body>
<button id="btn">点击发送验证码</button>
<script>
function countdown(seconds) {
var btn = document.getElementById('btn');
var timer = setInterval(function() {
seconds--;
if (seconds === 0) {
clearInterval(timer);
btn.innerHTML = '点击发送验证码';
btn.disabled = false;
} else {
btn.innerHTML = '重新发送(' + seconds + ')';
}
}, 1000);
btn.disabled = true;
btn.innerHTML = '重新发送(' + seconds + ')';
}
document.getElementById('btn').addEventListener('click', function() {
countdown(60);
});
</script>
</body>
这是一个只包含倒计时功能的示例，在点击按钮后，按钮状态变为不可点击状态，同时开始倒计时，60秒后恢复为可点击状态。
<body>
<button id="btn">点击发送验证码</button>
<script>
function countdown(seconds) {
var btn = document.getElementById('btn');
var timer = setInterval(function() {
seconds--;
if (seconds === 0) {
clearInterval(timer);
btn.innerHTML = '点击发送验证码';
btn.disabled = false;
localStorage.removeItem('startTime');
} else {
btn.innerHTML = '重新发送(' + seconds + ')';
}
}, 1000);
btn.disabled = true;
btn.innerHTML = '重新发送(' + seconds + ')';
localStorage.setItem('startTime', Date.now());
}
document.getElementById('btn').addEventListener('click', function() {
var now = Date.now();
var startTime = localStorage.getItem('startTime');
if (startTime && now - startTime < 60 * 1000) {
alert('请勿频繁发送验证码');
} else {
countdown(60);
// 发送验证码的代码
}
});
var startTime = localStorage.getItem('startTime');
if (startTime) {
var now = Date.now();
var seconds = Math.floor((60 * 1000 - (now - startTime)) / 1000);
if (seconds > 0) {
var btn = document.getElementById('btn');
btn.innerHTML = '重新发送(' + seconds + ')';
btn.disabled = true;
countdown(seconds);
} else {
localStorage.removeItem('startTime');
}
}
</script>
</body>
这个示例实现了发送验证码的完整功能，并加入了防止刷新倒计时失效的机制。在点击按钮后，会判断上一次发送验证码的时间是否超过60秒，如果是则调用倒计时功能函数，并且执行发送验证码的代码。在页面刷新后，会判断是否存在倒计时未结束的情况，如果存在，则恢复倒计时功能，并保证倒计时正确地进行，保证了发送验证码功能的正常进行。
本文链接：http://task.lmcjl.com/news/11650.html