Question

如何使用javascript在特定时间更改html文本例如

<p class="timer">00:00</p>

Answer 1

JavaScript具有setInterval和setTimeout函数来计时。 setInterval将其第一个参数作为函数，将第二个参数作为运行它的间隔（以毫秒为单位）。

首先，您需要计算到下一分钟的时间，这可以通过

来实现

60 - (new Date().getSeconds())

在此之后，您希望代码每分钟重复一次（每60000毫秒一次）。

所以，让我们编写用当前时间替换元素内容的函数

function replaceContentsOfElement(){
    document.querySelector(".timer").innerHTML = new Date().getHours() + ":" + new Date().getMinutes()
}

下一步是合并setTimeout，setInterval和我们的函数来生成结果。在该函数定义之后，您可以编写

setTimeout(function(){
    replaceContentsOfElement(),
    setInterval(replaceContentsOfElement, 60000)
}, 60 - (new Date().getSeconds()))

或者，您可以检查每一秒并更新时间，但效率不高。

Answer 2

这样的事情会在1秒后改变文字。这样你就可以看到它是如何工作的。

// HTML
<p id="myId" class="timer">00:00</p>
<p id="myId2" class="timer">00:00</p>

// JS
var text = document.getElementById("myId");
var text2 = document.getElementById("myId2");

var intervalID = window.setInterval(myCallback, 1000);

function myCallback() {
  text.textContent = "Changed after 1 second";
}

var timer = setInterval(setTime, 1000);

function setTime(){
  text2.textContent = new Date().getHours() + ':' + new Date().getMinutes() + ':' + new Date().getSeconds();
}

codepen

注意页面加载后显示＆＃39; 00＆＃39;，一秒后更新。

编辑 - 笔现在显示时间，并将每秒更新一次。

如何使用javascript在特定时间更改html文本

2 个答案: