Javascript隐藏按钮

时间:2014-02-22 07:08:29

标签: 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
    setTimeout("showNextButton()", 30000); 
</script>

HTML:

<div id="nextbutton" style="visibility: hidden">
    <a href="nextpage.html">Continue</a>
</div>

该脚本效果很好,但我想知道在30秒后出现主按钮之前如何显示已禁用的链接/按钮。

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

然后三十秒过去,但取而代之的是: [继续]

有人可以告诉我我要修改这个脚本来做这件事吗?

谢谢,

3 个答案:

答案 0 :(得分:1)

Demo Plunker

<强>描述

此代码将从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>

<强> JS

//29 because we have already waited 1 second before
var counter = 29;
//function that gets called every second
function showNextButton() {
  //if we are at 0 it has been 30 seconds
  if(counter == 0)
  {
    //show the continue link
    document.getElementById("nextbutton").style.display = "block";
    //hide the wait text
    document.getElementById("wait").style.display = "none";
    //disable the timer so we don't keep calling this function after 30 seconds
    clearInterval(myTimer);
  }
  else
  {
    //every second change the text
    document.getElementById("countdown-link").innerHTML = counter + ' seconds';
    //lower the timer counter by 1 since it has been 1 second
    counter--;
  }
}

//setup timer to call showNextButton every 1 second
var myTimer = setInterval("showNextButton()",1000);

验证浏览器

  • Chrome
  • 火狐
  • Safari浏览器
  • IE8-IE11(由于plunker不能在IE8下测试,但这个javascript应该可以回到IE6)

Using disabled button method

<强> 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>

<强> JS

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);

答案 1 :(得分:0)

隐藏下一个按钮时使另一个元素可见,然后在启用下一个按钮时隐藏它。

<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>

答案 2 :(得分:0)

<button href="11.html" id="nextbutton" disabled>Disabled for 30 seconds</button>


<script type="text/javascript">
    function showNextButton() {
        document.getElementById("nextbutton").disabled = false;
        document.getElementById("nextbutton").innerHTML = "Continue";
    }

    // adjust this as needed, 1 sec = 1000
    setTimeout(function(){showNextButton()},30000);
</script>