Question

我是Java的新手，对此不太了解。但是，我设法创建了一个倒计时计时器，该计时器可以像我希望的那样正常工作。这很简单，但是基本上它是一个倒计时到特定日期的计时器，一旦到达指定的日期和时间，它就会显示我可以自定义的文本。我希望这段代码能够在倒数到零时显示带有超链接的按钮。这是我到目前为止的代码：

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

您可以制作一个HTML按钮元素，其中包含指向您要定向到的页面的链接。确保为按钮提供一个ID“ demo”，以便它与您当前的代码配合使用

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

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

您可以尝试以下方法：

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 6

在p之后的html中，向其添加一个按钮和一个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!";
  }

向Java倒计时添加按钮

6 个答案: