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

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

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

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

 1 <!DOCTYPE html>
 2 <html>
 3 <head>
 4     <title>验证码倒计时</title>
 5     <script type="text/javascript" src="http://apps.bdimg.com/libs/jquery/2.1.4/jquery.min.js"></script>
 6     <style type="text/css" >
 7         .validate-div input{ 8             width:130px;
 9             float:left;
10             line-height:30px;
11         }
12         .validation{13             float:left;
14             width: 85px;
15             background-color: #2eaef1;
16             border-radius: 5px;
17             margin-left: 20px;
18             text-align: center;
19             margin-top: 3px;
20         }
21         .validation span{22             color: #fff;
23             line-height:30px;
24             font-size: 14px;
25         }
26     </style>
27 </head>
28
29 <body>
30 <div class="validate-div">
31     <input type="text" class="validation-code" id="validation-code" name="smscode" placeholder="输入验证码" >
32     <div class="validation">
33         <span class="" id="validate_span" onclick="sendsms(this);">获取验证码</span>
34     </div>
35 </div>
36 </body>
37 </html>
38
39 <script type="text/javascript">
40     //发送验证码函数
41     function sendsms(e){
42         /*发送验证码功能*/
43         countdown(e);                                   //若发送验证码成功，则调用倒计时函数
44     }
45     //倒计时函数
46     var time = 10;
47     function countdown(e){
48         if (time == 0) {
49             //e.setAttribute('disabled',false);         对没有disbaled属性的span标签，此方法无效
50             e.setAttribute("onclick","sendsms(this)");
51             $("#validate_span").html("获取验证码");
52             time = 10;
53         }else{
54             //e.attr('disabled',true);                  对没有disbaled属性的span标签，此方法也无效
55             //e.setAttribute("onclick", '');            这样写也可以
56             e.removeAttribute("onclick");
57             $("#validate_span").html("重新发送(" + time + ")");
58             time--;
59             setTimeout(function() {
60                 countdown(e)
61             },1000)
62         }
63     }
64 </script>
65 </body>
66 </html>

转载于:https://www.cnblogs.com/enjoyphp/p/7505513.html

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

前端控制微信分享到群，朋友圈的方法，js禁止微信分享亲测可用
直接上代码,下面代码都是开发过程中记录的怕丢了,就在这备个份,使用过程中有问题可以私信或者联系微信:wxid_7yiygpz72wk622 另也承接小程序,网站开发,H5开发,程序二次开发,APP开发 ...
使用pdf.js展示pdf文件(亲测可用)
简单的实现方式如果只是电脑端,可通过 iframe 标签嵌套预览 ios手机端可通过 a 标签包裹点击跳转预览(安卓端不行) 安卓电脑ios的通用方法资料老版本github地址全版本地址获取 ...
vue.js devtools下载（亲测可用）
网上太多用不了的版本了,这个可以用https://gitee.com/yingmingzhang/vue-devtools.git
js 获取浏览器内核亲测有效
话不多说 function getBrowser() {var ua = navigator.userAgent.toLowerCase(),re_msie = /\b(?:msie |ie |tri ...
a标签js阻止跳转_阻止点击a标签链接跳转
我们常用的在a标签中有点击事件(链接),其中"href"参数只要不为空,点击该链接时,页面会自动跳转:如果指定的"href"不合法,页面会跳转到自身,也就是刷新 ...
js正则检测输入内容为数字,包括负数,整数,浮点数,亲测可用.JS检测整数,js检测浮点数,js检测负数,js检测数字,js限制输入框只输入数字,解决H5 number类型只能输入正数问题.
JS 正则实现数字检测和限制输入,包括整数.浮点数.负数(亲测可用) 网上搜了一下,居然可以直接拿来用的很少,要么就是只能检测正整数.要么是只能检测浮点数,总之很多都不适合,而H5提供的type=&q ...
webview重新加载（reload）或者发起 redirect request导致js和objc代码之间的bridge失联解决方案（亲测有效）
webview重新加载(reload)或者发起 redirect request导致js和objc代码之间的bridge失联解决方案(亲测有效) 参考文章: (1)webview重新加载(reload ...
JS实现注册登录发送短信验证码动态显示60S倒计时完整案例
通常在web项目中都会遇到账户注册或者忘记密码时需要发送短信验证码的功能,虽然说这种功能很常见,但是实际开发过程中很多人还会遇到不少坑.笔者经过整理把最近项目中的用到的这个发送短信验证码动态显示60S ...
前端加密方法sha256.js源码+用法（亲测可用）
之前看到一个类似的,但是源码不完整:在此总结一个可用的. 一.sha256.js /**** Secure Hash Algorithm (SHA256)* http://www.webtoolkit ...
微信分享带缩略图，标题，简介的JS代码（亲测有效）
(function(){ var appId = '', imgUrl = 'http://huaweiapu.toprand.com/ascendG7/assets/i ...

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

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

最新文章

热门文章