您的位置:首页 > Web前端 > JavaScript

用户点击获取验证码之后我们会发送一条信息到用户手机,然后就会出现一个倒计时按钮,很像支付宝手机付款效果了,下面我给大家分享两个js效果

2016-04-08 15:46 447 查看
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"& gt;免费获取验证码</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();});
}

}

内容来自用户分享和网络整理,不保证内容的准确性,如有侵权内容,可联系管理员处理 点击这里给我发消息
标签: