JavaScript实现短信倒计时60s的方法

发布时间：2023-05-18 18:10:48

在网页中，我们经常需要实现一些验证码验证的功能，为了防止用户恶意操作，我们会使用短信验证码进行二次验证。在这个过程中，我们经常会遇到短信倒计时的需求，即用户提交信息后，需要等待一段时间才能重新发送短信。在本文中，将详细介绍如何使用 JavaScript 实现短信倒计时 60s 的方法，具体如下：

1. 定义倒计时变量

在 JavaScript 中，我们可以通过变量来存储倒计时的时间，代码如下：

let countdown = 60; // 定义倒计时时间

2. 定义倒计时函数

接下来，我们需要定义一个倒计时函数，用来计算倒计时的剩余时间，并将结果展示给用户，代码如下：

function settime(obj) {
    if (countdown == 0) {
        obj.removeAttribute("disabled"); // 倒计时结束，移除禁用属性
        obj.innerHTML = "获取验证码";
        countdown = 60; // 重置倒计时时间
        return;
    } else {
        obj.setAttribute("disabled", true); // 禁用按钮
        obj.innerHTML = "重新发送(" + countdown + "s)";
        countdown--;
    }
    setTimeout(function () {
        settime(obj);
    }, 1000);
}

在本函数中，我们对倒计时的剩余时间进行判断，如果为 0，则将按钮状态设置为可用，并重置倒计时时间；否则，禁用按钮，并更新倒计时剩余时间，并通过 setTimeout 函数设置 1s 后再次调用本函数，以达到倒计时更新的效果。

3. 调用倒计时函数

最后，我们只需要在 button 点击事件时，调用倒计时函数即可，代码如下：

<button onclick="settime(this)">获取验证码</button>

我们在按钮上添加 onclick 事件，当按钮被点击时，自动执行 settime 函数。

4. 完整代码

最终的完整代码如下：

<!DOCTYPE html>
<html>
<head>
    <title>短信倒计时</title>
</head>
<body>
    <button onclick="settime(this)">获取验证码</button>
    <script type="text/javascript">
        let countdown = 60;
        function settime(obj) {
            if (countdown == 0) {
                obj.removeAttribute("disabled");
                obj.innerHTML = "获取验证码";
                countdown = 60;
                return;
            } else {
                obj.setAttribute("disabled", true);
                obj.innerHTML = "重新发送(" + countdown + "s)";
                countdown--;
            }
            setTimeout(function () {
                settime(obj);
            }, 1000);
        }
    </script>
</body>
</html>

在本文中，我们详细介绍了如何使用 JavaScript 实现短信倒计时 60s 的方法，并给出了完整的实现代码。通过这个方法，我们可以方便地实现短信验证码的撤回和重新发送功能，提高用户体验。