利用JS实现短信验证码倒计时案例

àì夳堔傛蜴生んèń 2023-09-29 03:27 11阅读 0赞

> 本章教程利用JS实现发送短信倒计时案例，这个需求在实际开发过程很常见。

**目录**

一、程序代码

二、预览展示

--------------------

## 一、程序代码 ##

<!DOCTYPE html>
    <html lang="en">
    
    <head>
        <meta charset="UTF-8">
        <title>发送短信验证码倒计时案例</title>
        <style type="text/css">
            #demo {
                margin-top: 200px;
                text-align: center;
            }
        </style>
    </head>
    
    <body>
        <div id="demo">
            <input type="text" name="code" id="code">
            <button id="sendCode" onclick="sendCode()">获取验证码</button>
        </div>
        <script type="text/javascript">
            var btn = document.querySelector("#sendCode");
            var interval;
            var times = 10;
            function sendCode() {
                interval = setInterval(function () {
                    if (times > 0) {
                        btn.disabled = true;
                        btn.innerText = ((times < 10 ? "0" + times : times) + "s后重新获取");
                        times--;
                    } else {
                        clearInterval(interval);
                        btn.disabled = false;
                        btn.innerText = "获取验证码";
                    }
                }, 1000);
    
            }
        </script>
    </body>
    
    </html>

## 二、预览展示 ##

![发送短信验证码倒计时演示图][4c3ef794597048e0b185d2a6c7983d9d.gif]

[4c3ef794597048e0b185d2a6c7983d9d.gif]: https://img-blog.csdnimg.cn/4c3ef794597048e0b185d2a6c7983d9d.gif

发表评论取消回复

表情：

评论列表（有 0 条评论，11人围观）

还没有评论，来说两句吧...

相关阅读

相关 iOS 短信验证码倒计时按钮

级别： ★★☆☆☆ > 标签：「iOS 验证码后台倒计时」「NSTimer后台运行」「iOS 定时器后台运行」 > 作者： [Xs·H][Xs_H] > 审...

不念不忘少年蓝@/ 2024年04月17日 13:54/ 0 赞/ 105 阅读

相关利用JS实现短信验证码倒计时案例

> 本章教程利用JS实现发送短信倒计时案例，这个需求在实际开发过程很常见。目录一、程序代码二、预览展示 -------------------- 一、程序代码

àì夳堔傛蜴生んèń/ 2023年09月29日 03:27/ 0 赞/ 12 阅读

相关 js发送短信验证码倒计时效果

![在这里插入图片描述][20200317181758713.PNG] ![在这里插入图片描述][20200317181827440.PNG] <input ty

青旅半醒/ 2023年07月16日 03:38/ 0 赞/ 41 阅读

相关实现H5短信验证码倒计时

![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ub

àì夳堔傛蜴生んèń/ 2023年01月03日 01:44/ 0 赞/ 288 阅读

相关短信验证码倒计时

<button @click="sendout" ref="addAlert">发送验证码</button> // 短信验证码倒计时 send

ゞ浴缸里的玫瑰/ 2022年12月26日 10:16/ 0 赞/ 248 阅读

相关 jq php手机发短信倒计时,js实现发送短信验证码倒计时

原标题：js实现发送短信验证码倒计时发送短信验证码是网站或app常见的功能，为了避免用户频繁获取短信验证码，往往会设计一个倒计时功能，当间隔一定时间后才能再一次的获取，下面

以你之姓@/ 2022年11月18日 04:58/ 0 赞/ 231 阅读

相关获取短信验证码倒计时，非常简单

<!doctype html> <html lang="en"> <head> <meta charset="UTF-8">

比眉伴天荒/ 2022年05月24日 03:08/ 0 赞/ 265 阅读

相关 angularjs短信验证码及秒倒计时

　　工作H5开发需要做短信验证码及秒倒计时，如果是用纯JS做好像还比较容易，但用angularJS做还是一些坑，特此记录一下，有如下几种实现方式。一.setTimeout方

怼烎@/ 2022年04月06日 10:48/ 0 赞/ 389 阅读

相关 jquery 获取短信验证码倒计时

<script src="https://cdn.bootcss.com/jquery/3.3.1/jquery.min.js"></script> <scri

Dear 丶/ 2021年09月17日 04:10/ 0 赞/ 419 阅读

相关 jquery获取短信验证码倒计时

直接上代码 // 获取短信验证码 $('.get_code').click(function () { var $code = $(th

超、凢脫俗/ 2021年07月26日 17:14/ 0 赞/ 485 阅读