TIME2026-04-03 05:17:54

gett 接码网[T411]

热点

新闻分类

友情链接

首页 > 资讯 > js短信验证码60s倒计时怎么弄

资讯

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

2025-07-07IP属地美国0

在JavaScript中实现一个短信验证码的60秒倒计时功能可以通过多种方式完成。下面是一个简单的示例，展示了如何使用HTML和JavaScript创建一个倒计时功能。这个例子假设你已经有一个表单用于接收用户手机号，并且你已经实现了发送验证码的逻辑。

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

HTML部分：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>短信验证码倒计时</title>
</head>
<body>
    <form id="smsVerificationForm">
        <!-- 其他表单元素，如手机号输入框 -->
        <button id="sendVerificationCodeBtn" onclick="sendVerificationCode()">发送验证码</button>
        <div id="countdown">60</div> <!-- 用于显示倒计时的元素 -->
        <!-- 提交按钮等 -->
    </form>
    <script src="script.js"></script>
</body>
</html>

JavaScript部分 (script.js):

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

let countdown = 60; // 设置倒计时初始值
let intervalId; // 用于存储setInterval的ID，以便后续清除定时器
function sendVerificationCode() {
    // 这里添加发送验证码的逻辑，比如向服务器发送请求等，假设已经成功发送。
    // 开始倒计时
    document.getElementById(’countdown’).innerText = countdown; // 显示倒计时数值
    intervalId = setInterval(function() {
        countdown--; // 每秒倒计时减一
        document.getElementById(’countdown’).innerText = countdown; // 更新显示的倒计时数值
        if (countdown <= 0) { // 如果倒计时结束，执行相关逻辑，比如重新发送验证码或提示用户重新操作等。
            clearInterval(intervalId); // 清除定时器
            // 这里添加重新发送验证码或提示用户的逻辑，alert(’验证码已失效，请重新获取’);
            countdown = 60; // 重置倒计时为初始值，以便下次使用
        }
    }, 1000); // 每秒更新一次倒计时
}

这个例子中，当用户点击“发送验证码”按钮时，会调用sendVerificationCode函数开始倒计时，倒计时从60秒开始，每秒更新一次，直到倒计时结束（变为0），然后提示用户重新获取验证码并重置倒计时，你可以根据自己的需求对这个基本功能进行扩展和修改。