分享好友 资讯首页 资讯分类 切换频道

js短信验证码倒计时怎么弄

2025-11-11 22:3000

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

js短信验证码倒计时怎么弄

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秒,为了防止用户在倒计时期间重复点击按钮,按钮会被禁用,你可以根据自己的需求调整这个逻辑,你可能希望在倒计时结束后发送一条新的验证码或者重新生成一个新的验证码等。

举报
收藏 0
打赏 0
评论 0
为什么我的手机号被限制登录淘宝账号
手机号被限制登录淘宝账号可能是由于账号安全限制或系统检测到异常行为。可能涉及到账号安全问题,或者淘宝系统误认为该手机号涉及违规行为。建议联系淘宝客服,验证身份后解除限制。

0评论2026-04-072

 
友情链接