展示效果：

代码示例：

<!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. 一小时学会微信小程序

    一小时学会微信小程序 目录 一.小程序概要 1.1.发展历史 1.2.小程序的诞生 二.微信小程序介绍 三.开发微信小程序的软件下载与初步配置  3.1.获取微信小程序的AppID 3.2.下载安装微 ...

  2. Rust一些学习文档

    <Rust 烹饪书>https://llever.com/rust-cookbook-zh/intro.zh.html <Rust高级编程>https://learnku.co ...

  3. GIT安装及IDEA配置(GIT)

    参考:https://blog.csdn.net/qq_40563761/article/details/91347443 1.安装git 2.idea下载GITHUB/GITEE插件 3.idea配 ...

  4. 后台管理系统带关闭的选项卡（多标签页）功能 适配bootstrap3和4 Bootstrap Hover Dropdown

    眼看着是不是很熟悉,其实基本大部门后台管理系统都有这个功能,使用iframe实现展示标签页面. 主要功能:标签页点击,添加标签页,向左滚动标签页,向右滚动标签页,刷新当前标签页,关闭当前标签页,关闭其 ...

  5. 题解 P5072 【[Ynoi2015] 盼君勿忘】

    在太阳西斜的这个世界里,置身天上之森.等这场战争结束之后,不归之人与望眼欲穿的众人, 人人本着正义之名,长存不灭的过去.逐渐消逝的未来.我回来了,纵使日薄西山,即便看不到未来,此时此刻的光辉,盼君勿忘 ...

  6. Vulhub 漏洞学习之：Aria2

    Vulhub 漏洞学习之:Aria2 目录 Vulhub 漏洞学习之:Aria2 1 Aria2 任意文件写入漏洞 1.1 漏洞利用 1 Aria2 任意文件写入漏洞 Aria2是一个命令行下轻量级. ...

  7. webserver 简单demo

    以调用天气服务为例: 1.添加服务引用 2.点窗口做下角(高级->添加web引用->URL输入框输入天气服务地址(http://www.webxml.com.cn/WebServices/ ...

  8. 免费ASP空间

    free免费asp空间的申请方法: free免费asp空间的ftp使用方法: sise.host3v.vip/1

  9. window C盘满了/文件夹太长怎么移动

    通过以下命令移动文件夹 robocopy C:\Users\test\ E:\test\ /move /e C盘满了怎么办? 文件移动到其他盘,通过软连接访问 mklink /d "C:\U ...

  10. RadioGroup 自动换行且保留点击事件

    转:(22条消息) RadioGroup 自动换行且保留点击事件_再见孙悟空_的博客-CSDN博客 public class MyRadioGroup extends RadioGroup { pri ...