60秒验证码倒计时重置

最新推荐文章于 2022-07-04 15:33:56 发布

原创最新推荐文章于 2022-07-04 15:33:56 发布 · 293 阅读

0 ·

CC 4.0 BY-SA版权

文章标签：

#javascript

JavaScript 专栏收录该内容

11 篇文章

订阅专栏

这段代码展示了如何在HTML中创建输入手机号和获取验证码的字段，并通过JavaScript实现验证码的定时发送功能。当用户点击获取验证码按钮后，按钮将被禁用并开始倒计时，倒计时结束后按钮恢复功能，允许用户重新获取验证码。

// HTML
<input class="phone" name="phone" type="text" placeholder="填写手机号码">
<input class="code" name="code" type="button" value="点击获取验证码" onclick="getCode()">

// JavaScript
    var times= 60;
    function getCode() {
        var obj = $(".code");
        timer(obj);
        function timer(obj){
            if (times == 0) {
                obj.removeAttr("disabled");
                obj.val("点击获取验证码");
                times = 60;
                return;
            } else {
                obj.attr("disabled", true);
                obj.val("重新发送(" + times + ")");
                times --;
            }
            setTimeout(function () {
                timer(obj)
            },1000)
        }
    };