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.npm8.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.npm8.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 +")秒后重新发送"; } }
|
查看演示
点击下载