JS实现60s倒计时(亲测有效),及span标签如何使用和禁用onclick事件
16lz
2021-01-22
效果如下图:点击按钮出现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() {
sendsms(e)
},1000)
}
}
</script>
</body>
</html>
更多相关文章
- jQuery:执行一个函数AFTER toggleClass被执行
- 使用Sinon模拟require()函数
- 如何使函数等到对象的值未定义为js setTimeout
- 打字稿:无法访问类属性[重复]
- 放在和中的javascript语句,但是语句不在函数中,这些语句何在被执行
- [JavaScript]自执行函数
- 父范围中的变量不会在匿名函数中被更改[重复]
- 如何调用另一个函数内的函数?
- res.jwt不是函数 - NodeJS Express