<!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. RHEL 6.5安装系统

    转自如下链接: http://www.jb51.net/os/128752.html

  2. HTTP协议及常见状态码

    超文本传输协议(HTTP)是用于传输诸如HTML的超媒体文档的应用层协议.它被设计用于Web浏览器和Web服务器之间的通信,但它也可以用于其他目的. HTTP遵循经典的客户端-服务端模型,客户端打开一 ...

  3. Redis图形管理 redis-browser

    目录 一.介绍 二.部署 三.启动 监听单台 听多台 四.报错合集 一.介绍 redis-browser是redis的web端图形化管理工具.利用它可以查看和管理redis的数据,界面简洁,能和ral ...

  4. Python pyecharts绘制仪表盘

    一.仪表盘gauge.add方法简介 gauge.add()方法签名 add(name,attr,value, scale_range=none, angle_range=none,**kwargs) ...

  5. LuoguP7008 [CERC2013]What does the fox say? 题解

    Content 森林里面有很多声响,你想知道有哪些声响是由狐狸发出来的. 已知你搜集到了 \(n\) 个声响,并且还知道某些其他动物能够发出的声响,已知如果没有哪一个声响是由其他任何一种动物发出来的话 ...

  6. java 数据类型：集合接口Collection之List~ArrayList：remove移除；replaceAll改变原有值；sort排序；迭代器listIterator()；

    什么是List集合: 特点: 元素有序可重复的集合. 集合中每个元素都有其对应的顺序索引. List集合默认按元素的添加顺序设置元素的索引,索引从0开始.   List接口的常用方法: List可以使 ...

  7. 当页面是本地页面时，通过ajax访问tomcat里的action,传递的参数在action里并不能识别

    当页面是本地页面时,通过ajax访问tomcat里的action,传递的参数在action里并不能识别,这个问题困扰了我不少时间. 在测试时发现此问题

  8. InnoDB学习（五）之数据库锁

    InnoDB存储引擎的默认隔离级别事可重复读,MVCC多版本并发控制仅仅解决了快照读情况下的数据隔离,而对于当前读,InnoDB通过锁来进行并发控制. InnoDB锁 本文主要参考了MySQL官方文档 ...

  9. navicat模型分享方法

    一. 查看模型保存路径选中模型如:<app-订单模型>,点击右键,对象信息,可以看到文件位置:C:\Users\Administrator\Documents\Navicat\Premiu ...

  10. MyBatis学习（二）MyBatis-Statement方式的增删改查

    1.前期准备 项目骨架图如下所示 1.配置conf.xml <?xml version="1.0" encoding="UTF-8" ?> < ...