展示效果：

代码示例：

<!DOCTYPE html>

<html lang="en">

<head>

    <meta charset="UTF-8">

    <title>短信验证码倒计时</title>

</head>

<body>

    <input type="text">

    <button>发送</button>

    <script>

        var btn = document.getElementsByTagName("button")[0];

        // 剩余的秒数

        var time = 20;

        btn.onclick = function () {

            // 按钮变灰色，并且无法点击

            btn.disabled = true;

            // 倒计时

            var timer = setInterval(function () {

                if (time==0){

                    // 清除定时器

                    clearInterval(timer);

                    btn.disabled = false;

                    btn.innerText = "发送";

                    time = 20;

                }else {

                    btn.innerText = "还剩下" + time + "秒";

                    time--;

                }

            },1000)

        }

    </script>

</body>

</html>

JavaScript案例：短信验证码倒计时的更多相关文章

  1. jQuery获取短信验证码+倒计时实现

    jQuery 短信验证码倒计时 <script type="text/javascript" charset="utf-8"> $(function ...

  2. android 获取短信验证码倒计时

    android 获取短信验证码倒计时 watermark/2/text/aHR0cDovL2Jsb2cuY3Nkbi5uZXQvbWVuZ2xlbGUxMzE0/font/5a6L5L2T/fonts ...

  3. js 发送短信验证码倒计时

    html <input type="button" id="btn" value="免费获取验证码" onclick="se ...

  4. 基于jquery的-获取短信验证码-倒计时

    在制作短信验证的时候,需要做一个获取短信按钮,点击后显示倒计时, html代码如下: <input class="gain" type="button" ...

  5. iOS 短信验证码倒计时按钮的实现

    验证码倒计时按钮的应用是非常普遍的,本文介绍了IOS实现验证码倒计时功能,点击获取验证码,进入时间倒计时,感兴趣的小伙伴们可以参考一下: 实现思路: 创建按钮,添加点击方法: 用NSTimer定时器, ...

  6. 在ionic中使用短信验证码倒计时

    页面上 <button class="code" (click)="getCode()" [disabled]="!verifyCode.dis ...

  7. js,JQ获取短信验证码倒计时

    按钮 <a href="javasript:void(0);"onclick="settime(this);">获取手机验证码</a> ...

  8. js实现获取短信验证码倒计时

    <!DOCTYPE html> <html> <head> <meta charset="utf-8" /> <title&g ...

  9. 发送短信验证码倒计时，CountDownTimer；

    1.声明CountDownTimer的成员变量: private CountDownTimer countDownTimer; 2.设置倒计时总时间和间隔时间: countDownTimer = ne ...

  10. iOS-发送短信验证码倒计时

    /** 发送手机验证码 */ -(void)startSenderYzmMessage{ __block ; //倒计时时间 dispatch_queue_t queue = dispatch_get ...

随机推荐

  1. Python 内置界面开发框架 Tkinter入门篇 丙(文末有福利彩蛋，今天可是元宵节)

    以下内容为本人的学习笔记,如需要转载,请声明原文链接微信公众号「ENG八戒」https://mp.weixin.qq.com/s/B1hH5Qzd2RkAiiUId1tLWw 本文大概 2874 个字 ...

  2. countdownlatch应用场景

    场景1 让多个线程等待:模拟并发,让并发线程一起执行 为了模拟高并发,让一组线程在指定时刻(秒杀时间)执行抢购,这些线程在准备就绪后,进行等待(CountDownLatch.await()),直到秒杀 ...

  3. 元数据库 information_schema.tables

    转  https://www.cnblogs.com/ssslinppp/p/6178636.html 1.information_schema数据库 对于mysql和Infobright等数据库,i ...

  4. springcloud 10 spring cloud gateway02 基本使用

    官网:https://cloud.spring.io/spring-cloud-static/spring-cloud-gateway/2.2.1.RELEASE/reference/html/ 注册 ...

  5. window.alert和console.log()

    使用 window.alert() 您能够使用警告框来显示数据: 实例 <!DOCTYPE html> <html> <body> <h1>我的第一张网 ...

  6. CSS常用属性（3）

    (9) list-style(列表样式) 类型 list-style-type: disc | circle | square | decimal | lower-roman | upper-roma ...

  7. react中redux怎么使用

    一.redux是什么? redux 就是react 全局状态管理,作用是存放全局数据 二.核心 state:存放数据 reducer:修改仓库数据 是一个函数,参数一:仓库中的数据,参数2:行为 ac ...

  8. 记一次使用tika解析文件文本导致的内存溢出问题

    背景 笔者曾供职于某信息安全公司,接到过一个需求,提取文档中的文本以供后续分析.tika是apache开源的解析文档内容的组件,应用十分广泛.tika几乎支持你能想到的所有文档格式,docx , pp ...

  9. 获取微信小程序列表渲染 index

    微信小程序列表渲染 index(索引值)通过 wx:for-index="index" 来获取: <view class="item" wx:for=&q ...

  10. Avalonia 实现平滑拖动指定控件

    Avalonia 实现平滑拖动指定控件 1.创建一个UserControl控件,并且添加以下代码 using System; using Avalonia; using Avalonia.Contro ...