JS实现60s倒计时(亲测有效),及span标签如何使用和禁用onclick事件
2017-09-11 16:20
791 查看
效果如下图:点击按钮出现60秒倒计时,60s内按钮不可用,倒计时到了时间方可再次点击获取。
另外还有一个知识点,只有input 及button这样的表单元素有disbale属性,如何设置是否可用属性的方法一般用$("#id").attr('disbaled','true')及$("#id").prop('disbaled','false'),对span img这样的没有disbale的属性,这种方法就不起作用了,此时可用$("#id").setAttribute('onclick',function())或$("#id").removeAttribute("onclick")方法来设置事件是否可用。
以下是所有代码,复制即可使用:
另外还有一个知识点,只有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>
相关文章推荐
- 为radio类型的INPUT添加客户端脚本(附加实现JS来禁用onClick事件思路代码)
- Iscroll.js使用之后页面上面A标签的onclick事件无效了
- 为radio类型的INPUT添加客户端脚本(附加实现JS来禁用onClick事件思路代码)
- 如何用onClick事件实现a标签post提交?
- js实现为a标签添加事件的方法(使用闭包循环)
- js如何给页面中所有的img对象加上onclick事件,且实现在新窗体中查看该图片文件
- A标签上使用onclick事件,js函数响应成功,单会刷新当前页面陷阱
- js中使用a标签onclick事件切换图片时显示异常解决办法
- [网络收集]给radio类型的INPUT添加客户端脚本 --附加实现JS来禁用onClick事件思路代码
- 如何在onclick事件中使用<c:out>标签传参
- 在js循环中如何给a标签的点击事件的方法参数赋值有效
- html A标签的onclick事件和href的使用
- 如何利用JS动态创建标签并附于事件
- 使用masterpage的情况下如何使用js实现repeater控件里的checkbox全选
- a标签的href与onclick中使用js的区别
- 如何统计网站访问量,代码实现使用全局变量 Application,start,end,Session_start,Session_end事件
- js 实现谷歌浏览器中隐藏标签后setInterval事件暂停
- 如何统计网站访问量,代码实现使用全局变量 Application,start,end,Session_start,Session_end事件
- 如何在Joomla!管理后台中实现标签页面的效果(tabs.js) 【转】
- Joomla!中如何使用switcher.js实现一个位置上div层的切换显示 【转】