展示效果：

代码示例：

<!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. 【学习笔记】XR872 GUI Littlevgl 8.0 移植（文件系统）

    不得不提 在移植的过程中,发现 LVGL 的文件操作接口并不十分完善,在我看来, LVGL 的文件操作接口,应该更多的是为了 LVGL 内部接口方便读取资源文件而设立的,例如读取图像文件,加载字库文件 ...

  2. 六、python基础知识之变量常量、索引取值和PEP8规范

    目录 一.变量与常量 1.什么是变量? 2.什么是常量? 变量的基本使用 变量使用的语法结构与底层原理 变量名的命名规范和命名风格 变量的命名风格 常量的基本使用 二.索引取值 三.PEP8规范 1. ...

  3. 命令行部署KingbaseES流复制+切换测试

    建立系统数据库安装用户组及用户,在所有的节点执行 root用户登陆服务器,创建用户组及用户并且设置密码 groupadd -g 2000 kingbase useradd -G kingbase -g ...

  4. 一个通用的 java 项目的模板

    #!groovy def oper_checkout(SCM_TYPE,SCM_URL,SCM_AUTH_PASS,SCM_BRANCH=' ',SCM_AUTH_USER=' '){ if (SCM ...

  5. echarts入门到应用学习笔记

    背景: 做疫情数据管理可视化,需要用到热点图在web端进行数据可视化,而地图就是必不可少的一个,看完文档,可以解决大部分小白的问题,保姆级攻略,即使你的js,这些学得不咋样(我就是小菜鸟) 步骤 环境 ...

  6. rt-thread模糊到清晰系列: ipc.c

    #include <rtthread.h> #include <rthw.h> #ifdef RT_USING_HOOK extern void (*rt_object_try ...

  7. [学习笔记]SQL server完全备份指南

    方式一,使用SQL Server Management Studio 准备工作 连接目标数据库服务器 在目标数据库上右键->属性,将数据库的恢复模式设置为"简单",兼容级别设 ...

  8. layui 手机端时间不能滑动问题

    // 滑动问题 .laydate-time-list ol{overflow-x: hidden !important ;overflow-y: auto !important ;} //去除秒的显示 ...

  9. Java语法基础课程总结

    1.运行实例EnumTest.java并分析 结论:枚举类型属于引用类型,不属于原始数据类型它的每一个具体值都引用一个特定的对象,可以使用"=="直接比较枚举变量的值,枚举是可以从 ...

  10. java语言——跨平台原理，jre,jdk

    day1 Java是一种混合的编译运行方式:编译+解释(虚拟机) java的跨平台:在虚拟机中运行(jvm) jdk:jvm,核心类库,开发工具(开发环境) jre:Java的运行环境