在JavaScript中实现短信验证码的倒计时功能可以通过设置一个定时器来实现。以下是一个简单的实现示例。

HTML部分:
<div id="countdown">
<p>获取验证码倒计时:<span id="timer">60</span>秒</p>
</div>
<button id="sendBtn">获取验证码</button>JavaScript部分:
// 设置初始倒计时时间(秒)
var count = 60;
var timer;
var btn = document.getElementById(’sendBtn’);
var countdown = document.getElementById(’countdown’);
var timerSpan = document.getElementById(’timer’);
// 当点击获取验证码按钮时启动倒计时并禁用按钮防止重复点击
btn.addEventListener(’click’, function() {
if (timer) return; // 如果定时器已经存在,则不启动新的倒计时
timer = setInterval(function() {
if (--count < 0) { // 如果倒计时结束,重置倒计时并启用按钮
clearInterval(timer);
timer = null;
btn.disabled = false;
count = 60;
timerSpan.innerText = count;
} else {
timerSpan.innerText = count; // 更新倒计时时间
}
}, 1000);
});这个例子中,当用户点击获取验证码按钮时,会启动一个倒计时,每秒更新一次剩余时间,并在倒计时结束后重置为初始的60秒,为了防止用户在倒计时期间重复点击按钮,按钮会被禁用,你可以根据自己的需求调整这个逻辑,你可能希望在倒计时结束后发送一条新的验证码或者重新生成一个新的验证码等。








