展示效果：

代码示例：

<!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. 【分析笔记】全志平台 gpio-keys 驱动应用和 stack crash 解决

    内核配置 内核版本:Linux version 4.9.56 make ARCH=arm64 menuconfig Device Drivers ---> Input device suppor ...

  2. FAQ selenium无法click的一个案例分享(1)

    案例描述 http://sahitest.com/demo/php/fileUpload.htm 来自助教咨询 点击网页的第一个选择文件,如图 示例代码  from selenium import w ...

  3. bbs大作业

    1.项目开发基本流程 1.需求分析 2.架构设计 3.分组开发 4.提交测试 5.交付上线 2.项目流程 仿造博客园项目(核心:文章的增删改查) 1.表分析: 1.1用户表 1.2个人站点表 1.3文 ...

  4. SpringBoot+mybatis的驼峰命名转换不生效

    使用SpringBoote+mybatis在mybatis-config.xml的配置文件内配置的驼峰命名不生效 然后我就将mybatis的配置写在application.yml内,然后就生效了 用注 ...

  5. SpringCloud Stream消息驱动

    简单搭建,没有技术含量,Demo可用 1.介绍 ①产生原因 RabbitMQ.RocketMQ.Kafka.ActiveMQ 在一个项目中,可能存在多种不同的MQ,在不同的MQ中,切换维护开发都很麻烦 ...

  6. The Missing Semester - 第二讲 学习笔记

    第二讲 Shell 工具和脚本 课程视频地址: https://www.bilibili.com/video/BV1Vv411v7FR 本机学习使用平台:虚拟机ubuntu18.04.6 主题一:Sh ...

  7. 微信小程序【关于地址信息的接入以及自动选择当前位置】

    在做收货地址的时候,通常会让用户填写或者打开地图选择收获地址,此时就需要用到微信提供的地址API,在使用地址API的时候需要注册对应的API,而且地址API会经常调整,需要关注官方公告,下面就是关于地 ...

  8. [IOI2014]friend 朋友

    题目传送门 似乎是我的第一篇 IOI 题解? 思路 虽然说是 IOI 题,但是其实并没有那么难. 这个题目描述比较杂乱,简单的描述就是:给你一些关系,你需要选出一些点,使这些点的权值和最大,并且这些点 ...

  9. Shell命令-基础

    Shell命令 1 变量 定义变量时,变量名不加美元符号$,注意,变量名和等号之间不能有空格 a="myname" 用语句给变量赋值时, for file in `ls /etc` ...

  10. 代码随想录算法训练营day03 | LeetCode 203/707/206

    基础知识 数据结构初始化 // 链表节点定义 public class ListNode { // 结点的值 int val; // 下一个结点 ListNode next; // 节点的构造函数(无 ...