简体   繁体   中英

Javascript Hidden Button

I have a Javascript that works and its purpose is to hide a link/button for XYZ period of time.

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>

The script works great but I would like to know how I can show a disabled link/button prior to having the main button appear after 30 seconds.

For Example Button: (This is a disabled useless button just letting visitor know they have to wait 30 seconds to Continue.) [Disabled for 30 Seconds]

Then thirty seconds passes but and have that replaced with: [Continue]

Can someone please tell me what I have to do to modify this script to do this?

Thanks,

Demo Plunker

Description

This code will countdown from 30 to 0 then switch to the continue link. You could change it or ask for something else.


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

Verified Browsers

  • Chrome
  • Firefox
  • Safari
  • IE8-IE11 (can't test below IE8 because of plunker, but this javascript should work back to 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);

Make another element visible when you hide the nextbutton, and then hide it when you enable the nextbutton.

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

The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.

 
粤ICP备18138465号  © 2020-2024 STACKOOM.COM