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

Posted 勇往直泉

tags:

篇首语:本文由小常识网(cha138.com)小编为大家整理,主要介绍了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                 sendsms(e)
61             },1000)
62         }
63     }
64 </script>
65 </body>
66 </html>

 

以上是关于JS实现60s倒计时(亲测有效),及span标签如何使用和禁用onclick事件的主要内容,如果未能解决你的问题,请参考以下文章

原创:微信小程序+WEB使用JS实现注册60s倒计时功能

js(react)60s 验证码倒计时方法

js(react)60s 验证码倒计时方法

60s倒计时(原生js版)

js 实现纯前端将数据导出excel两种方式,亲测有效

js 实现纯前端将数据导出excel两种方式,亲测有效