[JavaScript] 发送验证码案例（基于定时器）

最新推荐文章于 2023-03-26 19:58:58 发布

Frank.30

最新推荐文章于 2023-03-26 19:58:58 发布

阅读量1k

点赞数 1

分类专栏： javascript 文章标签： javascript 前端 html

本文链接：https://blog.csdn.net/qq_49900295/article/details/123508630

版权

javascript 专栏收录该内容

39 篇文章 8 订阅

订阅专栏

本文介绍了如何在前端实现点击发送验证码按钮后，按钮禁用并在设定时间内倒计时的功能。点击按钮后，按钮会变为不可点击状态，内容更新为剩余秒数，通过定时器每秒递减秒数。当倒计时结束，按钮恢复可点击状态，内容重置。此功能常见于验证用户手机号码的场景。

摘要由CSDN通过智能技术生成

实现效果：
请添加图片描述

案例：发送验证码
点击按钮后，该按钮在设定时间内不能再次点击，防止重复发送短信
在这里插入图片描述
案例分析：
1.按钮点击之后，会禁用disabled为true
2.同时按钮里面的内容会变化，注意button里面的内容通过innerHTML修改
3.里面秒数是有变化的，因此需要用到定时器
4.定义一个变量，在定时器里面，不断递减
5.如果变量为0说明到了时间，我们需要停止定时器，并且复原按钮初始状态。

示例代码：

<body>
         手机号码: <input type="number">  <button>发送</button>
</body>    
<script>
        var btn = document.querySelector('button');
        btn.addEventListener('click',function() {
            var times = 3; //定义剩下的秒数
            btn.disabled = true;
            abc();//很重要，我们先调用一次这个函数，防止刷新页面时点击按钮会延迟一秒
            timer = setInterval(abc,1000);
            function abc() {
                btn.innerHTML = '还剩'+times+'秒可再次发送';
                if(times>0)
                {
                    times--;
                }
                else{
                    clearInterval(timer);  //清除定时器和复原按钮
                    btn.disabled = false;
                    btn.innerHTML = '发送';
                    times = 3;
                }
            }
    })
</script>