js與jQuery實現的用戶注冊協議倒計時功能實例【三種方法】

2019-11-19 14:57:39

字體：大中小

來源：轉載

供稿：網友

本文實例講述了js與jQuery實現的用戶注冊協議倒計時功能。分享給大家供大家參考，具體如下：

方法一：

<html xmlns="http://www.w3.org/1999/xhtml"><head>  <title>m.survivalescaperooms.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>m.survivalescaperooms.com 注冊倒計時</title>  <script src="jquery-1.7.2.min.js"></script></head><body>  <form action="http://m.survivalescaperooms.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>m.survivalescaperooms.com 注冊倒計時</title></head><body>  <form action="http://m.survivalescaperooms.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>

運行效果：