[导读] 今天要开发一个功能就是当用户点击获取验证码之后我们会发送一条信息到用户手机，然后就会出现一个倒计时按钮，很像支付宝手机付款效果了，下面我给大家分享两个js效果。js代码 代码如下复制代码 <di
今天要开发一个功能就是当用户点击获取验证码之后我们会发送一条信息到用户手机，然后就会出现一个倒计时按钮，很像支付宝手机付款效果了，下面我给大家分享两个js效果。
js代码
| 代码如下 |
复制代码 |
| <div class="input">
<input type="button" id="btn" class="btn_mfyzm" value="免费获取验证码" />
<script type="text/javascript">
var wait=5;
document.getElementById("btn").disabled = false;
function time(o) {
if (wait == 0) {
o.removeAttribute("disabled");
o.value="免费获取验证码";
wait = 5;
} else {
o.setAttribute("disabled", true);
o.value="重新发送(" + wait + ")";
wait--;
setTimeout(function() {
time(o)
},
1000)
}
}
document.getElementById("btn").onclick=function(){time(this);}
</script>
</div> |
jquery
| 代码如下 |
复制代码 |
| <li><span class="txt_name">验证码：</span><span class="code" onclick="getVerify();" id="timeb1" style="cursor:pointer">免费获取验证码</span><input class="input_code" autocomplete="off" onblur="if(this.value=='') this.value='';" onfocus="if(this.value=='') this.value='';" value="" type="text" name="verifyCode" id="verifyCode" ></li> |
js代码
| 代码如下 |
复制代码 |
| function f_timeout(){
$('#timeb1').html('<span id="timeb2">60</span>秒后重新获取');
$('#timeb1').click(function(){});
timer = self.setInterval(addsec,1000); } function addsec(){
var t = $('#timeb2').html();
//alert(t);
if(t > 0){
$('#timeb2').html(t-1);
//alert(t);
}else{
window.clearInterval(timer);
$('#timeb1').html('<span id="timeb2"></span>重新获取验证码');
$('#timeb1').click(function(){getVerify();});
}
} |
