效果如下图：点击按钮出现60秒倒计时，60s内按钮不可用，倒计时到了时间方可再次点击获取。

另外还有一个知识点，只有input 及button这样的表单元素有disbale属性，如何设置是否可用属性的方法一般用$("#id").attr('disbaled','true')及$("#id").prop('disbaled','false')，对span img这样的没有disbale的属性，这种方法就不起作用了，此时可用$("#id").setAttribute('onclick',function())或$("#id").removeAttribute("onclick")方法来设置事件是否可用。

以下是所有代码，复制即可使用：

 <!DOCTYPE html>

 <html>

 <head>

     <title>验证码倒计时</title>

     <script type="text/javascript" src="http://apps.bdimg.com/libs/jquery/2.1.4/jquery.min.js"></script>

     <style type="text/css" >

         .validate-div input{

             width:130px;

             float:left;

             line-height:30px;

         }

         .validation{

             float:left;

             width: 85px;

             background-color: #2eaef1;

             border-radius: 5px;

             margin-left: 20px;

             text-align: center;

             margin-top: 3px;

         }

         .validation span{

             color: #fff;

             line-height:30px;

             font-size: 14px;

         }

     </style>

 </head>

 <body>

 <div class="validate-div">

     <input type="text" class="validation-code" id="validation-code" name="smscode" placeholder="输入验证码" >

     <div class="validation">

         <span class="" id="validate_span" onclick="sendsms(this);">获取验证码</span>

     </div>

 </div>

 </body>

 </html>

 <script type="text/javascript">

     //发送验证码函数

     function sendsms(e){

         /*发送验证码功能*/

         countdown(e);                                   //若发送验证码成功，则调用倒计时函数

     }

     //倒计时函数

     var time = 10;

     function countdown(e){

         if (time == 0) {

             //e.setAttribute('disabled',false);         对没有disbaled属性的span标签，此方法无效

             e.setAttribute("onclick","sendsms(this)");

             $("#validate_span").html("获取验证码");

             time = 10;

         }else{

             //e.attr('disabled',true);                  对没有disbaled属性的span标签，此方法也无效

             //e.setAttribute("onclick", '');            这样写也可以

             e.removeAttribute("onclick");

             $("#validate_span").html("重新发送(" + time + ")");

             time--;

             setTimeout(function() {

                 countdown(e)

             },1000)

         }

     }

 </script>

 </body>

 </html>

JS实现60s倒计时(亲测有效)，及span标签如何使用和禁用onclick事件的更多相关文章

  1. js实现60s倒计时效果

    适用于获取验证码等其他场景,下面代码直接粘贴句可以使用 // 60s获取验证码的js与html var timer = null; var count = 60; $('.box>button' ...

  2. js 重写a标签的href属性和onclick事件

    适应场景:假如移动端拨打电话,需要给a标签添加href属性,但是由于需求,需要链接跳转的同时给a标签添加onclick事件,如果不做任何处理的话,默认执行点击事件,而不会跳转href属性的链接. 怎么 ...

  3. Cocos Creator JS web平台复制粘贴代码（亲测可用）

    Cocos Creator JS web平台复制粘贴代码(亲测可用) 1 webCopyString: function(str){ var input = str; const el = docum ...

  4. 【转】Win7环境下VS2010配置Cocos2d-x-2.1.4最新版本的开发环境(亲测)

    http://blog.csdn.net/ccf19881030/article/details/9204801 很久以前使用博客园博主子龙山人的一篇博文<Cocos2d-x win7+vs20 ...

  5. 手机号验证正则表达式+Demo（亲测完毕）

    以下为本人亲测过的验证手机号格式的demo,需要的小伙伴拿走不谢~<!DOCTYPE html><html><head><meta charset=" ...

  6. 6.短信验证码60s倒计时

    短信验证码60s倒计时 html: <input type="button"  class="btn btn-primary" value="免 ...

  7. CSS响应式：根据分辨率加载不同CSS的几个方法，亲测可用

    有时候你需要把同一个页面在手机和pc同时打开,其中有一个办法就是判断不同分辨路加载不同的css 小编总结了几种分别加载css的方法: 1.比较复杂的使用js判断加载不同css (亲测可用) 但是这种方 ...

  8. Discuz x3.2利用阿里云cdn处理https访问亲测教程

    第一步配置cdn和https 1.首先去阿里云.腾讯云.七牛云等申请免费https证书 2.虚拟主机是不能直接支持https的,需要cdn处理后才可以,并且端口是80 3.开启cdn加速处理,(买一个 ...

  9. jquery 60s倒计时

    前端开发中经常用到的发送按钮倒计时,每次都是重写,挺麻烦的,记录一下,以后直接来复制代码 <!DOCTYPE html> <html> <head> <met ...

随机推荐

  1. 进阶篇之纯css+字体实现五角星（半颗星）评分

    1.前言 之前写了一篇实现五角星打分效果的demo.这个demo用来实现打分效果绰绰有余,那么有时候我们在统计评分的时候,就会有半颗星或者1/3颗星星这样的那要如何实现呢?来来来,纯字体+css实现! ...

  2. Android学习笔记-绘制圆形ImageView实例

    现在很多的APP都很喜欢圆形的头像,这里就简单的写个圆形的ImageView~ 第三方圆形ImageView控件: RoundedImageView CircleImageView 实现代码: 自定义 ...

  3. IDEA 2017注册码破解方法（转）

    进入ide主页面,help-register-license server,然后输入 http://idea.iteblog.com/key.PHP(注意:php要小写)即可~ 如下图: 点击 Act ...

  4. 正则表达式大全 --【Python举例】

    包含 :  纯文字.正负数,小数.正数.正整数.月份.天数.用户名.密码.车牌.传真.手机.邮件.ipv4私有地址.ipv4地址.ipv6地址.json_header.request_header 有 ...

  5. Open-Falcon第二步安装绘图组件Transfer（小米开源互联网企业级监控系统）

    ----安装绘图组件---- 安装Transfer transfer默认监听在:8433端口上,agent会通过jsonrpc的方式来push数据上来. cd /usr/local/open-falc ...

  6. Python 实现排序算法

    排序算法 下面算法均是使用Python实现: 插入排序 原理:循环一次就移动一次元素到数组中正确的位置,通常使用在长度较小的数组的情况以及作为其它复杂排序算法的一部分,比如mergesort或quic ...

  7. 送你一双看见时间的眼睛--时间master软件

    开篇语 最近感觉自己时间管理非常错乱,所以去网上找了一些有关于时间管理的软件.然后发现了好几款还不错的软件或者是微信上的应用,下面我把我的一些使用情况以及如何使用的方法写出来,给有需要的朋友进行借鉴! ...

  8. 多系统重装其中Win7后的启动引导列表恢复

    重装Win7后会导致原grub引导被覆盖,要修复grub需要一张Ubuntu的LiveCD(安装光盘),用LiveCD启动电脑,进入Try Ubuntu(试用Ubuntu),进入之后打开终端,做如下几 ...

  9. 设计模式-前摄器模式(Proactor)

    本周要进行boost asio库的学习,在学习之前发现最好需要先了解一下前摄器模式,这样对asio库的理解很有帮助,故写下此文 我之前写的随笔XShell的模拟实现中的链接方式可以说是同步的(服务器阻 ...

  10. [BZOJ 1054][HAOI 2008]移动玩具 状态压缩

    考试的时候一看是河南省选题,觉得会很难,有点不敢想正解.感觉是个状压.但是一看是十年前的题,那怂什么! 直接把十六个数的状态压进去,因为个数是不变的,所以状态枚举的时候只要找数目一样的转移即可.而且只 ...