js与jQuery实现的用户注册协议倒计时功能实例【三种方法】

2019-11-19 14:57:39

字体：大中小

来源：转载

供稿：网友

本文实例讲述了js与jQuery实现的用户注册协议倒计时功能。分享给大家供大家参考，具体如下：

方法一：

<html xmlns="http://www.w3.org/1999/xhtml"><head>  <title>www.VeVB.COm 注册倒计时</title>  <script type="text/javascript">    //用户有十秒钟的时间看协议，超过十秒钟，“同意”按钮将生效    var Seconds = 10;    //计时器ID    var setIntervalID;    function ok() {      var getid = document.getElementById("but");      if (Seconds <= 0) {        getid.value="同意";        getid.disabled = false; //或者写成getid.disabled=""; 启用getid控件。        //停止计时器        clearInterval(setIntervalID);      }      else {        getid.value = "请仔细阅读协议还剩下【" + Seconds + "】秒";      }      Seconds--;    }   setIntervalID=setInterval("ok()", 1000);  </script></head><body><textarea cols="20" rows="8"></textarea><br /><!--disabled="disabled" 默认submit表单是禁用的，也就是只读的，不能点击--><input type="submit" id ="but" value="同意" disabled="disabled" /></body></html>

运行效果：

方法二：

<!DOCTYPE html><html xmlns="http://www.w3.org/1999/xhtml"><head>  <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />  <title>www.VeVB.COm 注册倒计时</title>  <script src="jquery-1.7.2.min.js"></script></head><body>  <form action="//www.VeVB.COm/" method="post" name="agree">    <input type="submit" class="button" value="" name="agreeb">  </form></body></html><script>  var secs = 5;  var si;  $(function () {    $(".button").attr("disabled", "disabled");    $(".button").val("请认真查看<服务条款和声明>(" + secs + ")")    si = setInterval(a, 1000);  })  function a() {    $(".button").val("请认真查看<服务条款和声明>(" + (secs-1) + ")");    if (secs == 0) {      clearInterval(si);      $(".button").val("我同意" ).removeAttr("disabled");    }    secs--;  }</script>

运行效果：

方法三：

<!DOCTYPE html><html xmlns="http://www.w3.org/1999/xhtml"><head><meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>  <title>www.VeVB.COm 注册倒计时</title></head><body>  <form action="//www.VeVB.COm/" method="post" name="agree">    <input type="submit" class="button" value="请认真查看<服务条款和声明> (30)" name="agreeb">  </form></body></html><script>  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 + ")";    }  }</script>

运行效果：