展示效果：

代码示例：

<!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. FLASH-CH32F203替换STM32F103 FLASH快速编程移植说明

    因CH32F203 相对于STM32 flash 操作多了快速编程模式,该文档说明主要目的是为了方便客户在原先ST 工程的基础上实现flash 快速编程模式的快速移植. 1.在stm32f10x.h ...

  2. Blazor入门100天 : 身份验证和授权 (6) - 使用 FreeSql orm 管理ids数据

    目录 建立默认带身份验证 Blazor 程序 角色/组件/特性/过程逻辑 DB 改 Sqlite 将自定义字段添加到用户表 脚手架拉取IDS文件,本地化资源 freesql 生成实体类,freesql ...

  3. 12月8日内容总结——Django推导流程，Django模块的下载和基本使用、Django的应用和目录结构讲解、Django三板斧

    目录 一.纯手撸web框架 二.基于wsgiref模块 三.代码封装优化 四.动静态网页 五.jinja2模块 六.前端.后端.数据库三者联动 七.python主流web框架 八.django简介 1 ...

  4. 线程基础知识11-CAS+自旋锁

    1.CAS是什么(CompareAndSet) CAS(Compare and swap)比较和替换是设计并发算法时用到的一种技术.简单来说,比较和替换是使用一个期望值和一个变量的当前值进行比较,如果 ...

  5. cv::Mat::step详解

    1.简介 step的几个类别区分: step:矩阵第一行元素的字节数 step[0]:矩阵第一行元素的字节数 step[1]:矩阵中一个元素的字节数 step1(0):矩阵中一行有几个通道数 step ...

  6. 使用SpringBoot简单实现WebRTC群聊会议室（Mesh方案）

    近期需要做一个类似会议室功能,但网络上大多数是一对一通信,故记录分享希望帮助到有用的人 WebRTC一对一聊天原理 关于WebRTC建立一对一聊天的模板网上很多,可参考以下博客:springboot+ ...

  7. 使用 DirectSound 录制麦克风音频

    使用 DirectSound 录制麦克风音频 本文所有代码均可在以下仓库找到 https://gitcode.net/PeaZomboss/learnaudios 目录是demo/dscapture ...

  8. KMP字符串 AcWing 831

    题目:https://www.acwing.com/problem/content/833/ 题意:求子串在母串中每次出现时的下标位置. 题解:哈哈哈,敲题时想到之前看到一个人叫 kmp 算法为 看毛 ...

  9. Binary &Op是什么

    前言 在并行开发时我们经常会用到Pstream::gather()函数或是全局函数reduce()或者其他,需要输入参数Binary &Op,本篇主要讨论Binary &Op是什么 t ...

  10. python编写程序练习-车牌摇号程序

    import random import string count = 0      #设定计数器 car_numbers = []   # 创建一个列表,用来接收生产的车牌号池 while coun ...