<!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. highchars操作集合

    一.tooltip 与鼠标指针的距离想调整tooltip和鼠标指针的距离,官方api 和中文api中都没写,只有轴 label.distance . 但我觉得应该有这个,看源码果然有 tooltip ...

  2. InnoDB学习（三）之BinLog

    BinLog又称为二进制日志,是MySQL服务层的数据日志,MySQL所有的存储引擎都支持BinLog.BinLog记录了MySQL中的数据更新和可能导致数据更新的事件,可以用于主从复制或数据恢复.本 ...

  3. 「Python实用秘技02」给Python函数定“闹钟”

    本文完整示例代码及文件已上传至我的Github仓库https://github.com/CNFeffery/PythonPracticalSkills 这是我的系列文章「Python实用秘技」的第2期 ...

  4. 解放双手，自动生成“x.set(y.get)”，搞定vo2dto转换

    作者:小傅哥 博客:https://bugstack.cn 沉淀.分享.成长,让自己和他人都能有所收获! 一.前言 给你机会,你也不中用啊 这些年从事编程开发以来,我好像发现了大部分研发那些不愿意干的 ...

  5. typescript接口---interface

    假如我现在需要批量生产一批对象,这些对象有相同的属性,并且对应属性值的数据类型一致.该怎么去做? 在ts中,因为要检验数据类型,所以必须对每个变量进行规范,自然也提供了一种批量规范的功能.这个功能就是 ...

  6. Samba 源码解析之SMBclient命令流

    smbclient提供了类似FTP式的共享文件操作功能, 本篇从源码角度讲解smbclient的实现,smbclient命令的具体使用可通过help命令和互联网查到大量资料. 以下从源码角度分析一个s ...

  7. LuoguP7106 双生独白 题解

    Content 给定一个 十六进制颜色码(一个长度为 \(7\) 的字符串,意义详见题面),请输出其反色的十六进制颜色码. 数据范围:颜色的 R,G,B 值保证在 \(255\) 以内. Soluti ...

  8. CSS中上下margin的传递和折叠

    CSS中上下margin的传递和折叠 1.上下margin传递 1.1.margin-top传递 为什么会产生上边距传递? 块级元素的顶部线和父元素的顶部线重叠,那么这个块级元素的margin-top ...

  9. redis查看redis 客户端状态

    查看redis客户端连接 redis-cli info clients # Clients connected_clients:6000 client_longest_output_list:0 cl ...

  10. Linux（Centos） 设置显示vim行号

    1.修改vimrc文件 vim /etc/vimrc 2.在最后添加 set nu 如下图片所示 然后wq! 保存退出