1.遇到阅读协议时的倒计时
<!--html 倒计时确定 -->
<input type="button" id="bt" value="请仔细阅读协议(5)" disabled="true" />
<script type="text/javascript">
var time = 5, //计数器
timer=null; //定时器
window.onload = function(){
var bt = document.getElementById('bt')
timer = setInterval("daojishi()", 1000);//执行方法
}
function daojishi() {
if(time <= 1) {
bt.value = "确定";
bt.removeAttribute("disabled");//删除按钮disabled属性
clearInterval(timer);//清除定时器
return;
}else{
time--;
bt.value = ("请仔细阅读协议(" + time +")");
}
}
</script>
第二种获取验证码,传参的方式,这个方法没有点击延迟
<!-- 获取验证码 -->
<input type="button" value="免费获取验证码" onclick="settime(this)"/>
<script>
var countdown=5;//计数器
function settime(val) {//方法里面传参数
if (countdown == 0) {
val.removeAttribute("disabled");//指向按钮本身
val.value="免费获取验证码";
countdown=5;
} else {
val.setAttribute("disabled", true);
val.value="重新发送(" + countdown + ")";
countdown--;
setTimeout(function() {
settime(val)
},1000)
}
}
</script>
第三章普通的方法,这种方法点击有延迟
<input type="button" id="btn" value="获取验证码"/>
<script>
var count=5,
timer2 = null;
var btn = document.getElementById("btn")
btn.onclick = function(){
timer2=setInterval(function(){
if (count==0) {
clearInterval(timer2)
btn.removeAttribute("disabled");
btn.value="免费获取验证码";
count=5;
}else{
btn.value = "重新发送(" + count + ")";
count--;
btn.setAttribute("disabled",true)
}
},1000)
}
</script>
网友评论