Javascript隐藏按钮_Javascript_Php_Html_Css_.net

Javascript隐藏按钮

javascript php html css .net

Javascript隐藏按钮,javascript,php,html,css,.net,Javascript,Php,Html,Css,.net,我有一个Javascript可以工作，它的目的是在XYZ时间段内隐藏一个链接/按钮 Javascript: <script type="text/javascript"> function showNextButton() { document.getElementById("nextbutton").style.visibility = "visible"; } // adjust this as needed, 1 sec = 1000

我有一个Javascript可以工作，它的目的是在XYZ时间段内隐藏一个链接/按钮

Javascript:

<script type="text/javascript">
    function showNextButton() {
       document.getElementById("nextbutton").style.visibility = "visible";
    }
    // adjust this as needed, 1 sec = 1000
    setTimeout("showNextButton()", 30000); 
</script>


函数showNextButton（）{
document.getElementById（“下一个按钮”）.style.visibility=“可见”；
}
//根据需要调整此值，1秒=1000
setTimeout（“showNextButton（）”，30000）；

HTML:

脚本工作得很好，但我想知道如何在30秒后主按钮出现之前显示禁用的链接/按钮

例如按钮：（这是一个禁用的无用按钮，只是让访问者知道他们必须等待30秒才能继续。） [禁用30秒]

然后三十秒过去了，但这一秒被替换为： [续]

有人可以告诉我，我必须做什么来修改这个脚本来做到这一点

谢谢，

在隐藏下一个按钮时使另一个元素可见，然后在启用下一个按钮时将其隐藏

<script type="text/javascript">
    function showNextButton() {
        document.getElementById("nextbutton").style.visibility = "visible";
        document.getElementById("disabledbutton").style.visibility = "hidden";
    }
    document.getElementById("disabledbutton").style.visibility = "visible";
    // adjust this as needed, 1 sec = 1000
    setTimeout("showNextButton()", 30000); 
</script>


函数showNextButton（）{
document.getElementById（“下一个按钮”）.style.visibility=“可见”；
document.getElementById（“disabledbutton”）.style.visibility=“hidden”；
}
document.getElementById（“禁用按钮”）.style.visibility=“可见”；
//根据需要调整此值，1秒=1000
setTimeout（“showNextButton（）”，30000）；

禁用30秒
函数showNextButton（）{
document.getElementById（“nextbutton”）.disabled=false；
document.getElementById（“nextbutton”）.innerHTML=“Continue”；
}
//根据需要调整此值，1秒=1000
setTimeout（函数（）{showNextButton（）}，30000）；

说明

此代码将从30倒计时到0，然后切换到继续链接。你可以改变它或要求其他东西

HTML

<!DOCTYPE html>
<html>

  <head>
    <link rel="stylesheet" href="style.css">
    <script src="script.js"></script>
  </head>

  <body>
    <div id="wait" style="display: block">
      <a id='countdown-link'>30 seconds</a>
    </div>
    <div id="nextbutton" style="display: none">
      <a href="nextpage.html">Continue</a>
    </div>
  </body>

</html>

<!DOCTYPE html>
<html>

  <head>
    <link rel="stylesheet" href="style.css">
    <script src="script.js"></script>
  </head>

  <body>
    <input id='next-button' type='button' disabled onclick="window.location='nextpage.html'" value='30 seconds'/>
  </body>

</html>

已验证的浏览器

铬
火狐
狩猎
IE8-IE11（由于plunker的原因，无法在IE8以下进行测试，但此javascript应该可以回到IE6）

HTML

<!DOCTYPE html>
<html>

  <head>
    <link rel="stylesheet" href="style.css">
    <script src="script.js"></script>
  </head>

  <body>
    <div id="wait" style="display: block">
      <a id='countdown-link'>30 seconds</a>
    </div>
    <div id="nextbutton" style="display: none">
      <a href="nextpage.html">Continue</a>
    </div>
  </body>

</html>

<!DOCTYPE html>
<html>

  <head>
    <link rel="stylesheet" href="style.css">
    <script src="script.js"></script>
  </head>

  <body>
    <input id='next-button' type='button' disabled onclick="window.location='nextpage.html'" value='30 seconds'/>
  </body>

</html>

你这个摇滚小子比我想的还要喜欢这个片段。现在你能告诉我这个跨浏览器对IE和其他浏览器友好吗？@FrankG。这应该适用于任何浏览器，如果不让我知道，我会验证支持。我在每一行javascript中都添加了一条注释，希望这有助于理解它的工作原理。理解javascript的人可以绕过30秒的等待时间。需要30秒等待时间的下载站点使用带有服务器端计时器的AJAX调用。但这至少会给你一个起点。avg乔想办法绕过它会有困难吗？是的，这很有帮助。我不担心人们可能会修改时间，因为它只是用来延迟页面上的某个人。没有购买计时器或类似的东西。要在Ajax中解决这个问题，我敢打赌这对我来说是一场噩梦：（哈哈，干得好，非常感谢！！！@FrankG。是的，你必须理解javascript，调试javascript，以及更多（高于平均水平的东西）…除非这段代码保护了黑客想从众多文件托管网站之一下载链接的内容，否则就不值得了…如果只是为了延迟用户，我可能会等30秒。此外，对于产品质量代码，我不会使用链接，而是使用按钮或引导样式，让div看起来像按钮，但这段代码是有效的，如果您需要我提供更多信息，有时这就足够了。请询问。@FrankG。它在IE7中不起作用，我只是没有在IE7中进行测试，所以它不是

验证的

，而是纯粹的推测。我在JFIDLE中测试了这段代码，但它没有正常工作。谢谢！这是这个答案的工作JSFIDLE，只是一些缺点由于JSFIDLE处理

onload

vs in

<!DOCTYPE html>
<html>

  <head>
    <link rel="stylesheet" href="style.css">
    <script src="script.js"></script>
  </head>

  <body>
    <input id='next-button' type='button' disabled onclick="window.location='nextpage.html'" value='30 seconds'/>
  </body>

</html>

var counter = 29;
function showNextButton() {
  if(counter == 0)
  {
    document.getElementById("next-button").disabled = false;
    document.getElementById("next-button").value = 'Continue';
    clearInterval(myTimer);
  }
  else
  {
    document.getElementById("next-button").value = counter + ' seconds';
    counter--;
  }
}

var myTimer = setInterval("showNextButton()",1000);