下面是详细讲解“JS实现发送短信验证后按钮倒计时功能(防止刷新倒计时失效)”的完整攻略。
一、需求分析
我们要实现的功能是:在用户点击发送短信验证码按钮后,按钮变为不可点击状态,同时开始显示倒计时,直到倒计时结束后按钮恢复可点击状态。
为了防止用户在倒计时过程中刷新页面导致倒计时失效,我们需要使用浏览器的本地存储(localStorage/sessionStorage)来保存倒计时开始时间,页面刷新后可以根据存储的时间计算出倒计时的剩余时间,从而保证倒计时能够正确恢复。
二、实现步骤
1. HTML部分
<button id="send-code-btn">发送验证码</button>
2. JavaScript部分
1)定义倒计时功能函数
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中删除存储的开始时间。
2)绑定按钮点击事件
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
函数开始倒计时操作,并执行发送短信验证码的代码。
3)处理页面刷新后的倒计时恢复
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秒,如果是则调用倒计时功能函数,并且执行发送验证码的代码。在页面刷新后,会判断是否存在倒计时未结束的情况,如果存在,则恢复倒计时功能,并保证倒计时正确地进行,保证了发送验证码功能的正常进行。
本站文章如无特殊说明,均为本站原创,如若转载,请注明出处:JS实现发送短信验证后按钮倒计时功能(防止刷新倒计时失效) - Python技术站