Question

我的javascript计时器到期后如何显示按钮？我正在使用Visual Studio 2010并基于ASP项目执行此操作。

我目前的计时器代码如下：

<script type="text/javascript">
  function countDown(sec, elem) {
  var element = document.getElementById(elem);
  element.innerHTML = "Time left: " + sec + " seconds";
   if (sec < 1) {
    clearTimeout(timer); //clear timeout
    element.innerHTML = 'Time is up!';
    document.getElementById("<%=btnPresentAnswer.ClientID %>").Visible = true;
                }
    sec--;
    var timer = setTimeout('countDown(' + sec + ', "' + elem + '")', 1000);


                }
</script>
<div id="status"></div>
<script type="text/javascript">
    countDown(5, "status");
</script>

Answer 1

您需要setInterval代替：

＆＃13;

function countDown(sec, elem) {
  var intervalId = undefined;
  var intervalId = setInterval(function(){ 
    var element = document.getElementById(elem);
    element.innerHTML = "Time left: " + sec + " seconds";
    
    if (sec < 1) {
      clearInterval(intervalId);
      element.innerHTML = 'Time is up!';
      //document.getElementById("<%=btnPresentAnswer.ClientID %>").style.visibility = "visible"; // ← Uncomment this line!
    }

    sec--;
  }, 1000);
}

countDown(5, "status");

＆＃13;

<div id="status"></div>

＆＃13;

Answer 2

也许您应该将 display：none 添加到按钮，然后如果计时器完成，那么您应该将显示值替换为块。

实施例：假设你在这里有html块然后这是按钮

// html
// head
// end head
// body
       <button style="display:none">Test</button> // this will not show in the UI

       <script>
           // your timer function 
           // then if timer is up you should manipulate the display:none turn it into this display:block;
       </script>
//end body
// end html

Answer 3

更改此行：

document.getElementById("<%=btnPresentAnswer.ClientID %>").Visible = true;

为：

document.getElementById("<%=btnPresentAnswer.ClientID %>").style.visibility = "visible";

假设您已将初始可见性设置为其他位置的“隐藏”，例如：

<button id="<%=btnPresentAnswer.ClientID %>" style="visibility:hidden">submit</button>

您也可以使用“style.display = block / inline / none”切换显示/隐藏，但“显示”和“可见性”之间存在细微差别：

display = none：隐形按钮不占用空间;

visibility = invisible：隐形按钮占用空间。

javascript计时器到期后显示按钮

3 个答案: