需要找出如何使一個按鈕出門

Question

目前，我有一個倒計時到15

<div id="skip" style="margin-top: 4px;"> 
      <p> Please wait for <span id="timer" style="font-weight:bold;">15</span> seconds</p> 
     </div> 

<div id="button"> 
     <form action="http://website.com"> 
    <input type="submit" style="display: none;" value="Go to website"/> 

    <script> 
    var count = 15; 

    function countDown(){ 
     var timer = document.getElementById("timer"); 
     if(count > 0){ 
      count--; 
      timer.innerHTML = count; 
      setTimeout("countDown()", 1000); 
     }else{ 
      document.getElementById("button"); 

     } 
    } 
    countDown(); 
    </script> 

它做它的工作並遞減計數到十五倒計時腳本。我真正想要發生的事情是，當15秒鐘結束時，它會顯示一個按鈕，顯示「進入網站」。

基本上它就像其他的縮寫，但它不是。

我不認爲document.getElementByID不起作用。我一直在尋找一種方法來使按鈕出現，但它不工作。

Answer 1

以隱藏按鈕開始，並在計時器到期時刪除該條件。一個常見的方法是使用「隱藏」工具類，如下所示。

注意：在這段代碼中的計數是3，因爲我覺得無聊，等待15秒每次迭代。 :)

var count = 3; 
 

 
function countDown(){ 
 
    var timer = document.getElementById("timer"); 
 
    var button; 
 
    var skipContainer; 
 
    if(count > 0){ 
 
    count--; 
 
    timer.innerHTML = count; 
 
    setTimeout("countDown()", 1000); 
 
    }else{ 
 
    skipContainer = document.getElementById("skip"); 
 
    button = document.getElementById("button"); 
 
    skipContainer.classList.add("hidden"); 
 
    button.classList.remove("hidden"); 
 
    } 
 
} 
 
countDown();

.hidden { 
 
    display: none; 
 
}

<div id="skip" style="margin-top: 4px;"> 
 
    <p> Please wait for <span id="timer" style="font-weight:bold;">15</span> seconds</p> 
 
</div> 
 

 
<div id="button" class="hidden"> 
 
    <form action="http://website.com"> 
 
    <input type="submit" value="Go to website"/> 
 
    </form> 
 
</div>

Answer 2

您可以使用，我認爲是更自然的setInterval（）函數的倒計時過程。我重用@Palpatim答案中的大部分代碼。

var count = 3; 
 

 
var myVar = setInterval(function(){ countDown() }, 1000); 
 

 
function countDown() { 
 
    var timer = document.getElementById("timer"); 
 
    var button; 
 
    var skipContainer; 
 
    if(count > 0){ 
 
    count--; 
 
    timer.innerHTML = count;  
 
    }else{ 
 
    myStopFunction(); 
 
    skipContainer = document.getElementById("skip"); 
 
    button = document.getElementById("button"); 
 
    skipContainer.classList.add("hidden"); 
 
    button.classList.remove("hidden"); 
 
    } 
 
} 
 

 
function myStopFunction() { 
 
    clearInterval(myVar); 
 
}

.hidden { 
 
    display: none; 
 
}

<div id="skip" style="margin-top: 4px;"> 
 
    <p> Please wait for <span id="timer" style="font-weight:bold;">15</span> seconds</p> 
 
</div> 
 

 
<div id="button" class="hidden"> 
 
    <form action="http://website.com"> 
 
    <input type="submit" value="Go to website"/> 
 
    </form> 
 
</div>