展示效果：

代码示例：

<!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. 【随笔记】linux usb gadget ncm wrong ndp sign 问题修复

    一.模拟网卡简介 在 Linux 通过 usb 模拟网卡时,有四种方式: 1. 使用 usb gadget rndis 2. 使用 usb gadget ecm 3. 使用 usb gadget nc ...

  2. STL关联式容器使用注意、概念总结

    引入 继上文 STL序列式容器使用注意.概念总结 继续总结关联式容器的概念以及一些使用事项. 关联式容器与容器适配器 基础容器 STL 中的关联式底层容器:RB tree, hash table,可以 ...

  3. Spring异步Async和事务Transactional注解

    Spring开发中我们我们常常用到@Transaction和@Async,但这2个注解加在一起很多的开发者不敢用,担心事务不生效.下面我们就仔细讲解一下这2个注解同时运用,文章用3个场景讲述它们之间的 ...

  4. .net core Autofac IOC 容器的简单使用

    书接上回,介绍了.net core 读取配置文件的几种方式,本文学习Autofac的同时再次增加一种读取配置文件的方法. 本文介绍Auofac,一个优秀的.NET IOC框架 源码地址:https:/ ...

  5. Vue3 企业级优雅实战 - 组件库框架 - 12 发布开源组件库

    前面使用了 11 篇文章分享基于 vue3 .Monorepo 的组件库工程完整四件套(组件库.文档.example.cli)的开发.构建及组件库的发布.本文属于这 11 篇文章的扩展 -- 如何发布 ...

  6. makefile 入门第一课

    makefile入门第一课 百度百科makefile词条: 一个工程中的源文件不计其数,其按类型.功能.模块分别放在若干个目录中. makefile 定义了一系列的规则来指定,哪些文件需要先编译,哪些 ...

  7. [POI2014]HOT-Hotels 加强版

    长链剖分优化 \(dp\) 模板 不过这 \(dp\) 真毒 \(\text{Code}\) #include <cstdio> #define RE register #define I ...

  8. JZOJ 1967.【2011集训队出题】聪聪可可

    题目 [2011集训队出题]聪聪可可 思路 看看做做 阴阳 这道题 极力推荐 自从做了这道题后,这些题就变成秒切的题了 很容易想到求节点到分治中心的距离,然后 \(\bmod 3\) 那么在求根节点一 ...

  9. 单例 Bean 的线程安全问题

    最近面试遇到一个问题:单例 Bean 的线程安全问题怎么解决的. 之前了解但是没有深究它的解决方法.大部分时候我们并没有在项目中使用多线程,所以很少有人会关注这个问题. 大部分 Bean 实际都是无状 ...

  10. HDMI转USB视频采集卡（ACASIS 1080P高清视频采集卡）--九五小庞

    ACASIS阿卡西斯是深圳市菲德越科技有限公司旗下数码科技品牌.菲德越是2008年成立的一家专注于采集卡.硬盘盒.集线器等专业3C配件产品,集研发.设计.生产.销售于一体的高新科技公司,我们公司以向客 ...