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()一章节。

回复

我来回复
  • 暂无回复内容