朱清林's Blog

朱清林's Blog

js发送验证码倒计时效果

HTML表单代码 

<div class="indexPic02">
	<form>
        <p><input type="text" class="text01"><label>姓名</label></p>
        <p><input class="weui_input text03" id="name" type="text" value="" placeholder="贷款金额"><input class="qixian_input text03" id="qixian" type="text" value="" placeholder="贷款期限"></p>
        <p><input type="tel" class="text01"><label>手机号码</label></p>
        <p><input type="tel" class="text01 text04"><label>验证码</label><input type="button" value="获取验证码" class="btn03" id="btn"></p>
        <p><input type="button" value="立即申请" class="btn01"></p>
    </form>
</div>

js倒计时代码 

var wait=60;
function time(o) {
	if (wait == 0) {
		o.removeAttribute("disabled");
		o.value="获取验证码";
		wait = 60;
	} else {
		o.setAttribute("disabled", true);
		o.value="重新发送(" + wait + ")";
		wait--;
		setTimeout(function() {time(o)},1000);
	}
}
document.getElementById("btn").onclick=function(){time(this);}

附件里有完整代码演示

原文地址:http://www.lltonet.com/7.html

附件下载: demo.zip 

阅读 598   190