Добавление кнопки в обратный отсчет Javascript

Question

Я невероятно новичок в Javascript и плохо знаю его.Однако мне удалось создать таймер обратного отсчета, который работает наполовину так, как я этого хочу.Это довольно просто, но в основном это таймер, который ведет обратный отсчет до определенной даты, а затем, как только он достигает указанной даты и времени, он затем отображает текст, который я могу настроить.Я хотел бы, чтобы этот код мог отображать кнопку с гиперссылкой, как только обратный отсчет достигнет нуля.Вот код, который у меня есть:

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

Любая помощь, позволяющая отобразить кнопку с гиперссылкой вместо текста "Мы живем в Facebook!"будет принята с благодарностью.

Answer 1

В свойстве innerHTML () вы можете передать тег HTML, например

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

Answer 2

Просто добавьте HTML к строке, которую вы устанавливаете:

// 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.com">We\'re Live on Facebook!</a>';
  }
}, 1000);

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

Answer 3

Вы можете попробовать это:

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

со свойством innerHTML вы можете добавить необработанный HTML. Вы также можете добавить скрытый тег, а затем сделать его видимым:

для видимых:

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

для невидимого:

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

Надеюсь, это поможет вам.

Answer 4

Вам нужно создать такую ​​кнопку:

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

И затем вы можете показать это через JavaScript, например, так:

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

Answer 5

Вы можете просто создать элемент кнопки HTML со ссылкой на страницу, на которую вы пытаетесь перейти. Убедитесь, что вы присвоили кнопке идентификатор 'demo', чтобы она работала с вашим текущим кодом

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

Answer 6

В html после p добавьте кнопку и добавьте в нее dd класс, чтобы изначально скрыть его

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

В css добавить класс hide

.hide{
 display:none;
}

В JS, когда он достиг 0, удалить этот класс

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