js实现点击按钮倒计时30秒发送手机验证码

js倒计时30秒 激活按钮点击功能,要求用户阅读完条款内容才能激活按钮,要求用户激活短信通道向用户手机发送验证码。

html代码:

1
2
3
4
5
6
7
8
9
10
11
12
13
<div class="demo">
<p>示例一:要求用户阅读完条款内容才能激活按钮</p>
<form action="http://www.grycheng.com/" method="post" name="agree">
<input type="submit" class="button" value="请认真查看<服务条款和声明> (30)" id="agree_btn" name="agreeb">
</form>
<br/>
<br/>
<br/>
<p>示例二:要求用户激活短信通道向用户手机发送验证码</p>
<form action="http://www.grycheng.com/" method="post" name="myform">
<input type="button" class="button" value="获取手机验证码" id="phone_btn" name="phone" onClick="showtime(30)">
</form>
</div>

js代码:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
var secs = 30;
document.agree.agreeb.disabled=true;
for(var i=1;i<=secs;i++) {
window.setTimeout("update(" + i + ")", i * 1000);
}
function update(num) {
if(num == secs) {
document.agree.agreeb.value =" 我 同 意 ";
document.agree.agreeb.disabled=false;
}
else {
var printnr = secs-num;
document.agree.agreeb.value = "请认真查看<服务条款和声明> (" + printnr +")";
}
}
function showtime(t){
document.myform.phone.disabled=true;
for(i=1;i<=t;i++) {
window.setTimeout("update_p(" + i + ","+t+")", i * 1000);
}
}
function update_p(num,t) {
if(num == t) {
document.myform.phone.value =" 重新发送 ";
document.myform.phone.disabled=false;
}
else {
printnr = t-num;
document.myform.phone.value = " (" + printnr +")秒后重新发送";
}
}

查看演示

点击下载