Question

我做了一个倒数计时器，完成后，我想让它显示
“已完成，请单击此处继续。”
单击此处应该是超链接。但是我不知道该怎么做。
Javascript计时器：

var seconds = initialTime;
function timer() {
    var days        = Math.floor(seconds/24/60/60);
    var hoursLeft   = Math.floor((seconds) - (days*86400));
    var hours       = Math.floor(hoursLeft/3600);
    var minutesLeft = Math.floor((hoursLeft) - (hours*3600));
    var minutes     = Math.floor(minutesLeft/60);
    var remainingSeconds = seconds % 60;
    if (remainingSeconds < 10) {
        remainingSeconds = "0" + remainingSeconds; 
    }
    document.getElementById('countdown').innerHTML = minutes + "minutes " + remainingSeconds+ "seconds";
    if (seconds == 0) {
        clearInterval(countdownTimer);
        document.getElementById('countdown').innerHTML = "Completed"; //Link should be shown after completed here
    } else {
        seconds--;
    }

这也是应该显示实时倒计时和Completed +超链接的html代码：

<p class="p-2" style="font-family:R;">You can visit the site again in <span id="countdown" class="timer"></span></p>

Answer 1

innerHTML的意思是：内部 HTML 。如果您知道如何使用HTML创建链接，只需分配该HTML。

document.getElementById('countdown').innerHTML = 'Completed, <a href="https://your-link-goes-here/">click here</a> to continue';

作为旁注：我经常看到人们在Stack Overflow上使用innerHTML作为向内容添加内容的默认且唯一的方法，即使他们只是将纯文本添加到元素中。

还有另一个属性innerText，它更适合于此属性，您不必担心文本会被意外地视为HTML或HTML实体。

Answer 2

您需要 insertAdjacentText（）函数我相信您需要在倒数计时后立即使用，然后才能使用“ beforeend”。

示例：

  document.getElementById("countdown").insertAdjacentHTML("beforerend", "<p>My new paragraph</p>");

这是上述功能的完整文档

https://developer.mozilla.org/en-US/docs/Web/API/Element/insertAdjacentText

将链接放在document.getElementById（''）。innerHTML =之后

2 个答案: