javascript强制阅读注册协议指定时间代码实例
在很多网站进行用户注册的时候,都会强制要求阅读注册协议。
通常的措施就是只有经过指定时间之后,注册按钮才是可用的,下面就通过代码实例介绍一下如何实现此功能。
代码如下:
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <meta name="author" content="http://www.pipipi.net/" /> <title>前端教程网</title> <script type="text/javascript"> var count=10; var timer=null; function CountDown(){ var btnReg=document.getElementById("btnReg"); if(btnReg){ if(count<=0){ btnReg.disabled=false; btnReg.value="下一步进行注册"; clearTimeout(timer); } else{ btnReg.value="请仔细阅读协议(还剩"+count+"秒)"; count--; } } setTimeout(CountDown,1000); } window.onload=function(){ CountDown(); } </script> </head> <body> <textarea>请同意本站的协议</textarea><br /> <input id="btnReg" type="button" value="同意" disabled="disabled" /> </body> </html>
上面的代码实现了我们的要求,下面介绍一下它的实现过程。
一.代码注释:
(1).var count=10,规定倒计时的秒数。
(2).var timer=null,作为定时器函数的标识。
(3).function CountDown(){},此方法实现了具体的倒计时功能。
(4).var btnReg=document.getElementById("btnReg"),获取按钮元素对象。
(5).if(btnReg){
if(count<=0){
btnReg.disabled=false;
btnReg.value="下一步进行注册";
clearTimeout(timer);
}
else{
btnReg.value="请仔细阅读协议(还剩"+count+"秒)";
count--;
}
}如果存在指定的按钮,并且count的值小于等于0,那么就意味着倒计时完成,那么就将按钮修改为可用,并且修改按钮的value属性值,最后停止定时器函数的执行。如果count依然大于0,那么就只改变按钮的value属性值,其实就是实现了倒计时效果。
(6).setTimeout(CountDown,1000),递归方式调用CountDown()方法。
二.相关阅读:
(1).disabled属性可以参阅javascript button.disabled属性一章节。
(2).clearTimeout()方法可以参阅clearTimeout()一章节。
(3).setTimeout()方法可以参阅setTimeout()一章节。