html - Adding a Button to a Javascript Countdown - Stack Overflow

admin管理员组

文章数量:1295903

I'm incredibly new to Javascript and don't know it very well. However, I've managed to create a countdown timer that semi-works like I want it to. It's pretty simple but it's basically a timer that counts down to a specific date, and then once it reaches the specified date and time, it then displays text that I can customize. I would love for this code be able to display a button with a hyperlink once the countdown reaches zero. Here is the code that I have so far:

// Set the date we're counting down to
var countDownDate = new Date(Date.now() + 20000).getTime();

// Update the count down every 1 second
var x = setInterval(function() {

  // Get todays date and time
  var now = new Date().getTime();

  // Find the distance between now and the count down date
  var distance = countDownDate - now;

  // Time calculations for days, hours, minutes and seconds
  var days = Math.floor(distance / (1000 * 60 * 60 * 24));
  var hours = Math.floor((distance % (1000 * 60 * 60 * 24)) / (1000 * 60 * 60));
  var minutes = Math.floor((distance % (1000 * 60 * 60)) / (1000 * 60));
  var seconds = Math.floor((distance % (1000 * 60)) / 1000);

  // Output the result in an element with id="demo"
  document.getElementById("demo").innerHTML = days + " days, " + hours + " hours, " +
    minutes + " minutes, & " + seconds + " seconds";

  // If the count down is over, write some text 
  if (distance < 0) {
    clearInterval(x);
    document.getElementById("demo").innerHTML = "We're Live on Facebook!";
  }
}, 1000);

<p id="demo" class="countdown-live" style="text-align:center;"></p>

I'm incredibly new to Javascript and don't know it very well. However, I've managed to create a countdown timer that semi-works like I want it to. It's pretty simple but it's basically a timer that counts down to a specific date, and then once it reaches the specified date and time, it then displays text that I can customize. I would love for this code be able to display a button with a hyperlink once the countdown reaches zero. Here is the code that I have so far:

// Set the date we're counting down to
var countDownDate = new Date(Date.now() + 20000).getTime();

// Update the count down every 1 second
var x = setInterval(function() {

  // Get todays date and time
  var now = new Date().getTime();

  // Find the distance between now and the count down date
  var distance = countDownDate - now;

  // Time calculations for days, hours, minutes and seconds
  var days = Math.floor(distance / (1000 * 60 * 60 * 24));
  var hours = Math.floor((distance % (1000 * 60 * 60 * 24)) / (1000 * 60 * 60));
  var minutes = Math.floor((distance % (1000 * 60 * 60)) / (1000 * 60));
  var seconds = Math.floor((distance % (1000 * 60)) / 1000);

  // Output the result in an element with id="demo"
  document.getElementById("demo").innerHTML = days + " days, " + hours + " hours, " +
    minutes + " minutes, & " + seconds + " seconds";

  // If the count down is over, write some text 
  if (distance < 0) {
    clearInterval(x);
    document.getElementById("demo").innerHTML = "We're Live on Facebook!";
  }
}, 1000);

<p id="demo" class="countdown-live" style="text-align:center;"></p>

Any help getting this to display a hyperlinked button instead of the text "We're Live On Facebook!" would be greatly appreciated.

• javascript
• html
• countdown

Share Follow edited Mar 18, 2019 at 15:41 James Coyle 10.4k22 gold badges4242 silver badges4949 bronze badges asked Mar 18, 2019 at 15:37 Austin DuncanAustin Duncan 3311 silver badge55 bronze badges 1

• 1 So change the line that displays the text. document.getElementById("demo").innerHTML = "We're Live on Facebook!"; I see no attempt on your part to solve this. – j08691 Commented Mar 18, 2019 at 15:41

Add a ment  | 

6 Answers 6

Sorted by: Reset to default 5

In the innerHTML() property you can pass a a HTML tag like

<a href="...">
  <button> YOUR TEXT </button> 
</a>

Just add the HTML to the string you are setting:

// Set the date we're counting down to
var countDownDate = new Date(Date.now() + 20000).getTime();

// Update the count down every 1 second
var x = setInterval(function() {

  // Get todays date and time
  var now = new Date().getTime();

  // Find the distance between now and the count down date
  var distance = countDownDate - now;

  // Time calculations for days, hours, minutes and seconds
  var days = Math.floor(distance / (1000 * 60 * 60 * 24));
  var hours = Math.floor((distance % (1000 * 60 * 60 * 24)) / (1000 * 60 * 60));
  var minutes = Math.floor((distance % (1000 * 60 * 60)) / (1000 * 60));
  var seconds = Math.floor((distance % (1000 * 60)) / 1000);

  // Output the result in an element with id="demo"
  document.getElementById("demo").innerHTML = days + " days, " + hours + " hours, " +
    minutes + " minutes, & " + seconds + " seconds";

  // If the count down is over, write some text 
  if (distance < 0) {
    clearInterval(x);
    document.getElementById("demo").innerHTML = '<a href="https://facebook.">We\'re Live on Facebook!</a>';
  }
}, 1000);

<p id="demo" class="countdown-live" style="text-align:center;"></p>

You can just make an HTML button element with a link to the page you're trying to direct to. Make sure you give the button an ID of 'demo' so it works with your current code

<button id="demo" onclick="window.location.href = 'https://www.facebook./';">We're live on Facebook!</button>

You'll need to create a button like so:

<button id="myButton" style="display:none"><a href="example.">Button Text</a></button>

And then you can show it through JavaScript like so:

document.getElementById("myButton").style.display = "inline";

You could try this:

document.getElementById("demo").innerHTML = "<a href='https://www.youUrl.'>We're Live on Facebook!</a>";

with innerHTML property you can add raw HTML. You could also add a hidden tag and then make it visible:

for visible:

document.getElementById("yourID").style.visibility = "visible";

for not visible:

document.getElementById("main").style.visibility = "hidden";

I hope this help you.

In html after p add a button and a dd a class to it to initially hide it

<p id="demo" class="countdown-live" style="text-align:center;"></p>
<button id='liveButton' type='button' class='hide'>Your Text</button>

In css add class hide

.hide{
 display:none;
}

In js when it i reached 0 remove that class

if (distance < 0) {
    clearInterval(x);
    document.getElementById("liveButton").classList.remove('hide')
    document.getElementById("demo").innerHTML = "We're Live on Facebook!";
  }

本文标签： htmlAdding a Button to a Javascript CountdownStack Overflow