註冊協議閱讀倒數計時按鈕可用程式碼

antzone發表於2017-04-12
原文網址 : https://www.softwhy.com/article-6721-1.html
協議

大家可能見過這樣的效果，就是當註冊賬號的時候，需要同意指定的協議，並且為了讓使用者認真閱讀，採用了倒數計時策略，一般是倒計指定時間之後註冊按鈕才是可用的，下面就通過程式碼例項介紹一下如何實現此功能。

程式碼如下:

[HTML] 純文字檢視 複製程式碼
<!DOCTYPE html>
<html>
<head>
<meta charset=" utf-8">
<meta name="author" content="http://www.softwhy.com/" />
<title>螞蟻部落</title>
<style type="text/css">
#btn 
{
  width:200px;
  height:50px;
  background -color:gary;
}
</style>
<script type="text/javascript"> 
onload=function (){ 
  var btn = document.getElementById('btn'); 
  var intervalId = setInterval(function () { 
    var waitSecond = parseInt((/\d+/).exec(btn.value));
    waitSecond--;
    if (waitSecond >= 0) {
      btn.value=btn.value.replace(/\d+/, waitSecond) 
    } 
    else { 
      btn.value = '同意';
      btn.disabled = false;
      clearInterval(intervalId);
    } 
  }, 1000); 
}; 
</script>
</head>
<body>
<input type="button" value="請仔細閱讀5秒後點選同意繼續" id="btn" disabled="disabled"/>
</body>
</html>

以上程式碼實現了我們的要求，按鈕在五秒之後才是可用的，下面介紹一下它的實現過程。

一.程式碼註釋:

1.onload=function (){}，當穩當內容完全載入完畢再去執行函式中的程式碼，這裡是省略了window。

2.var btn = document.getElementById('btn')，獲取按鈕物件。

3.var intervalId = setInterval(function () { },1000)，每隔1000毫秒也就是1秒執行一次函式。

4.var waitSecond = parseInt((/\d+/).exec(btn.value))，用正規表示式提取按鈕value屬性值中的數字。

5.waitSecond--，秒數減一。

6.if (waitSecond >= 0) {btn.value=btn.value.replace(/\d+/, waitSecond) } ，如果秒數大於零的話，則將按鈕中的數字替換為減一後的數字，也就是繼續執行遞減操作。

7.else { btn.value = '同意';btn.disabled = false;clearInterval(intervalId);} ，否則將按鈕value值修改為"統一"，並且將按鈕設定為可用，停止定時器函式的執行。

二.相關閱讀:

1.setInterval()函式可以參閱setInterval()一章節。 

2.parseInt()函式可以參閱javascript parseInt()一章節。 

3.exec()函式可以參閱正規表示式exec()函式一章節。

4.replace()函式可以參閱正規表示式replace()函式一章節。  

5.disabled屬性可以參閱javascript button.disabled一章節。

6.clearInterval()函式可以參閱clearInterval()一章節。

相關文章