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

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

代码如下：

 <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. 在 Linux 打造属于自己的 Vim

    Linux 系统中很多东西都是以脚本代码.配置文件的形式存在,使用 Linux 系统时,需经常对这些文件进行编辑.很显然,如果没有文本编辑器,江湖之路寸步难行. 我的选择是 Vim.Vim 是 Lin ...

  2. MySQL语句学习记录

    注意,命令行下,每条语句最后都需要加分号. 1.显示所有数据库 SHOW DATABASES 2.使用某数据库 如mysql数据库  use mysql  (sql语句不区分大小写) 3.显示所有表 ...

  3. C++11 shared_ptr 智能指针 的使用,避免内存泄露

    多线程程序经常会遇到在某个线程A创建了一个对象,这个对象需要在线程B使用, 在没有shared_ptr时,因为线程A,B结束时间不确定,即在A或B线程先释放这个对象都有可能造成另一个线程崩溃, 所以为 ...

  4. salesforce 零基础学习（五十八）通过sObject的field返回其对应的基础类型

    项目中有时候会要求通过sObject的Field的type类型返回其对应的基本类型,然后对其进行相关的处理,创建sObject的field可以选择的type类型是固定多的. 上述类型可以转换成几种基本 ...

  5. Nginx 服务器 之Nginx与tomcat实现负载均衡

      本文讲解我们如何使用Nginx做反向带服务器,实现nginx与tomcat服务器集群做负载均衡. 一.nginx与tomcat实现负载均衡 1.在/usr/local/ngnix/conf  创建 ...

  6. PHP安装mysql.so扩展

    在PHP中mysql_connect模块已经逐渐被弃用,我在搭建环境时也没有再安装mysql扩展,但是今天在维护一个老项目时,出现报错 Fatal error: Uncaught Error: Cal ...

  7. Android Weekly Notes Issue #231

    Android Weekly Issue #231 November 13th, 2016 Android Weekly Issue #231 Android Weekly阅读笔记, Issue #2 ...

  8. PHP的学习--使用phar打包

    前段时间写了几个PHP的脚本,但是因为脚本的项目是基于composer安装的,给别人使用的时候不太方便,就希望能够打包成一个能直接使用的文件. 搜索了一下,发现可以使用phar打包. 假设我们有如下一 ...

  9. NodeJs对Mysql封装

    之前在学习NodeJs的时候,每次操作数据库都需要连接数据库然后开始写Sql操作,这样非常麻烦,然后自己对Mysql进行了封装,一共100多行代码. github地址: Mysql操作 我在里面对My ...

  10. 【分布式】Chubby与Paxos

    一.前言 在上一篇理解了Paxos算法的理论基础后,接下来看看Paxos算法在工程中的应用. 二.Chubby Chubby是一个面向松耦合分布式系统的锁服务,GFS(Google File Syst ...