在写注册页面时，有时候需要发送注册邮件来获取验证码，但是为了防止多次重复发送邮件，

必须让按钮隔一段时间后才能再次使用。

代码如下：

 <html>

 <head>

 <meta charset="utf-8">

 <title>验证码按钮</title>

 </head>

 <body>

     <button type="button" id="send">发送验证码</button>

     <script type="text/javascript">

         wait = 60;

         function wait_time(btn) {

             if (wait == 0) {

                 btn.removeAttribute("disabled");

                 btn.innerText = "发送验证码";

                 wait = 60;

             } else {

                 btn.setAttribute("disabled", true);

                 btn.innerText = wait+"秒后重新发送";

                 wait--;

                 setTimeout(function(){wait_time(btn);},1000);

             }

         }

     document.getElementById('send').onclick = function(){wait_time(this)};

     </script>

 </body>

 </html>

js实现发送验证码倒计时按钮的更多相关文章

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

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

  2. js实现发送验证码倒计时效果

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

  3. jQuery 发送验证码倒计时按钮 复制代码

    <!DOCTYPE html> <html> <head> <title></title> <script src="../ ...

  4. jQuery 发送验证码倒计时按钮

    { wait:90, hsTime:function(that){ if (this.wait == 0) { $('#hsbtn').removeAttr("disabled") ...

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

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

  6. iOS 短信验证码倒计时按钮的实现

    验证码倒计时按钮的应用是非常普遍的,本文介绍了IOS实现验证码倒计时功能,点击获取验证码,进入时间倒计时,感兴趣的小伙伴们可以参考一下: 实现思路: 创建按钮,添加点击方法: 用NSTimer定时器, ...

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

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

  8. 原生 JS 实现手机验证码倒计时

    可以使用 pointer-events 来阻止元素成为鼠标事件的 target.html5 新增操作元素 class 类名的方式 classList. classList 方法 add(value): ...

  9. js 发送验证码倒计时

    首先写一个按钮: <input type="button" id="btn" value="免费获取验证码" onclick=&quo ...

随机推荐

  1. 我的第一个python程序--给2.x的print代码加上括号

    最近想学习一门脚本语言,综合考虑,选择了python. 花了几天时间看完了 简明 Python 教程 ,想着应该写点什么东西才好,刚好我使用的是3.x版本,以前好多2.x的代码都直接报错,尤其是pri ...

  2. docker创建私有仓库

    由于网速和大中华局域网效果,使得我们在DockerHub下载镜像的速度很慢,甚至一些国内的镜像仓库,也感觉速度不是很好.所以,很有必要在本地或者一个我们访问很快速的地方(自己的云服务器)搭建一套镜像仓 ...

  3. ABP源码分析三十六：ABP.Web.Api

    这里的内容和ABP 动态webapi没有关系.除了动态webapi,ABP必然是支持使用传统的webApi.ABP.Web.Api模块中实现了一些同意的基础功能,以方便我们创建和使用asp.net w ...

  4. VirtualBox 桥接上网方式的配置

    最近在搞Redis所以装了个virtualbox的ubuntu的虚拟机, redis不是在ubuntu上. 因为需要使用本机客户端访问redis服务,所以需要配置虚拟机和本地机器的双向访问,所以就用到 ...

  5. Python的魔法函数之 - __len__,__getitem__,__setitem__,__delitem__

    # 对象作为len()函数的参数是必须实现该方法 __len__ # 使用类似字典方式访问成员时必须实现 dic['pro_name'] __getitem__ # 使用类似字典方式设置成员时必须实现 ...

  6. JavaScript权威设计--跨域,XMLHttpRequest(简要学习笔记十九)

    1.跨域指的是什么? URL 说明 是否允许通信 http://www.a.com/a.jshttp://www.a.com/b.js 同一域名下 允许 http://www.a.com/lab/a. ...

  7. 【解决方案】 org.springframework.beans.factory.BeanCreationException: Error creating bean with name 'userHandler': Injection of resource dependencies failed;

    一个错误会浪费好多青春绳命 鉴于此,为了不让大家也走弯路,分享解决方案. [错误代码提示] StandardWrapper.Throwableorg.springframework.beans.fac ...

  8. 【解决方案】cvc-complex-type.2.4.a: Invalid content was found starting with element 'init-param'. One of '{"http://java.sun.com/xml/ns/javaee":run-as, "http://java.sun.com/xml/ns/javaee":security-role-r

    [JAVA错误] cvc-complex-type.2.4.a: Invalid content was found starting with element 'init-param'. One o ...

  9. C# 复制幻灯片（包括格式、背景、图片等）到同/另一个PPT文档

    C# 复制幻灯片(包括格式.背景.图片等)到同/另一个PPT文档 复制幻灯片是使用PowerPoint过程中的一个比较常见的操作,在复制一张幻灯片时一般有以下两种情况: 在同一个PPT文档内复制 从一 ...

  10. CSS3与页面布局学习总结（三）——BFC、定位、浮动、7种垂直居中方法

    一.BFC与IFC 1.1.BFC与IFC概要 BFC(Block Formatting Context)即“块级格式化上下文”, IFC(Inline Formatting Context)即行内格 ...