<!DOCTYPE html>

<html lang="en">

<head>

    <meta charset="UTF-8">

    <meta http-equiv="X-UA-Compatible" content="IE=edge">

    <meta name="viewport" content="width=device-width, initial-scale=1.0">

    <title>Document</title>

</head>

<body>

    <input type="text">

    <button>发送</button>

    <script>

        //获取元素

        var btn = document.querySelector('button');

        var timer = 60;

        btn.addEventListener('click',function(){

            var tt= setInterval(function(){

            if(timer==0){

                clearInterval(tt);

                btn.disabled=false;

                btn.innerText='发送';

                timer=60;

            }else{

                btn.disabled=true;

                btn.innerText=timer+'重新发送'

                timer--;

            }

        },1000)

        })

    </script>

</body>

</html>

BOM 点击触发 倒计时发送验证码案例的更多相关文章

  1. js倒计时发送验证码按钮

    var wait=60; function time(o) { if (wait == 0) { o.removeAttribute("disabled"); o.value=&q ...

  2. Java 之 Response 发送验证码案例

    定义一个 Servlet 用来在内存中生成 二维码图片,并向浏览器页面输出. import javax.imageio.ImageIO; import javax.servlet.ServletExc ...

  3. 发送验证码60s倒计时实现

    <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8&quo ...

  4. react native中的聊天气泡以及timer封装成的发送验证码倒计时

    今天看来情书写的文章,研究了一下大佬写的文章,自己做一点总结. 其实,今天我想把我近期遇到的坑都总结一下:1.goBack的跨页面跳转,又两种方法,一可以像兔哥那样修改navigation源码,二可以 ...

  5. 微信小程序发送验证码功能，验证码倒计时

    data{ timer:'', countDownNum:'发送验证码', } // 点击验证码倒计时获取验证码 Gain:function(e){ let that = this let count ...

  6. 【积累】发送验证码按钮倒计时js

    注册的时候要发送验证码,就上网研究了一下,写了一个简单点的... jsp页面: <input type="button" id="testbtn" val ...

  7. js&jq 发送验证码倒计时

    <input  type="text"   name=''  id="btn"> //发送验证码倒计时var wait=30; function t ...

  8. jQuery实现发送验证码倒计时60秒

    前端HMTL: <div class="form_box"> <div class="line mb40"> <div class ...

  9. jQuery实现的手机发送验证码倒计时效果代码分享

    这是一款基于jquery实现的手机发送验证码倒计时效果代码,可实现实时显示秒数倒计时的功能,还可实现对手机号码格式验证的功能,是一款常用的网站注册发送手机验证码特效代码. 效果描述:注册一个网站,当需 ...

随机推荐

  1. 【Java 调优】Java性能优化

    Java性能优化的50个细节(珍藏版) 1. 尽量在合适的场合使用单例 使用单例可以减轻加载的负担,缩短加载的时间,提高加载的效率,但并不是所有地方都适用于单例,简单来说,单例主要适用于以下三个方面: ...

  2. Redis的一致性哈希算法

    一.节点取余 根据redis的键或者ID,再根据节点数量进行取余. key:value如下 name:1 zhangsna:18:北京 对name:1 进行hash操作,得出来得值是242342345 ...

  3. SQLserver 2014自定义备份数据库

    一.管理-维护计划-维护计划向导-下一步 二.点击更改设置任务执行时间-确定-下一步 三.选择备份数据库完整-下一步 四.选择需要备份的数据库-然后确定 五.点目标自定义备份文件存储目录-下一步 六. ...

  4. STL模板前言(1)

    STL提供以下数据结构方便使用: 顺序容器: vector(动态数组):从后面直接插入删除元素,直接访问任何元素. deque(双端队列):从前面和后面快速插入删除,直接访问任何元素. list(双链 ...

  5. 🔥🔥🔥【已开源】Flutter 腾讯优量汇广告插件，帮助开发者获利 - FlutterAds

    前言 Flutter 已成为目前最流行的跨平台框架之一,在近期的几个大版本的发布中都提到了 Flutter 版本 Google 广告插件 [google_mobile_ads] .对于"出海 ...

  6. Windows服务（.net Core 3.1-Topshelf-log4net-quartz）

    https://github.com/yezei/Topshelf-log4net-quartz.git

  7. WebRTC + WebSocket 实现视频通话

    前言 WebRTC WebRTC(Web Real-Time Communication).Real-Time Communication,实时通讯. WebRTC能让web应用和站点之间选择性地分享 ...

  8. 对ORM的理解

    1. 在面试中可能会问到这个问题,什么是ORM? ORM是对象关系映射(Object Relational Mapping),简称ORM,或O/RM,或O/R mapping,是一种程序技术. 白话理 ...

  9. Linux中磁盘管理与三剑客之awk初识

    昨日内容回顾 1.用两种方法实现 将文件中以 # 开头的行 把 # 去掉 sed -r 's/^ *#//g' /etc/fstab cat /etc/fstab | tr -d '^#' 2.将文件 ...

  10. textarea标签换行符以br存入数据库 ，br转 textArea换行符

    textArea换行符转 <br/> textarea标签回车符是/n,在html里识别回车是<br/>,在存入数据库之前要进行转换成<br/>,在取出展示在htm ...