Question

基本上，我试图让我的代码每秒更新一次元素的值。问题是我当前的代码仅在第一次更新。控制台也没有错误。

奇怪的是console.log（）之后一直运行，但是元素没有更新，时间变量也没有

var today = new Date();
var time = today.getHours() + ":" + today.getMinutes() + ":" + today.getSeconds();
var date = today.getFullYear() + '/' + String(today.getMonth() + 1).padStart(2, '0') + '/' + String(today.getDate()).padStart(2, '0');

setInterval(function() {
  time = today.getHours() + ":" + today.getMinutes() + ":" + today.getSeconds();
  var elTime = document.getElementById("time");
  elTime.textContent = time;
  console.log(time);
}, 1000);

Answer 1

您需要为间隔的每个刻度重新设置“今天”。更改为此：

setInterval(function(){
   var heute= new Date();
  time = heute.getHours() + ":" + heute.getMinutes() + ":" + heute.getSeconds();
  var elTime = document.getElementById("time");
  elTime.textContent = time;
  console.log(time);
}, 1000);

Answer 2

一个简单有效的setInterval程序如下所示。

setInterval(() => {
  var elTime = document.getElementById("time");
  elTime.textContent = parseInt(elTime.textContent) + 1;
}, 1000);

<div id="time">0</div>

请注意，所有需要执行的代码都在setInterval函数的范围内。要解决您的问题，请在函数范围内添加所有代码，以使其每次都像这样运行。

setInterval(function() {
  //Variables
  var today = new Date();
  var time = today.getHours() + ":" + today.getMinutes() + ":" + today.getSeconds();
  var date = today.getFullYear() + '/' + String(today.getMonth() + 1).padStart(2, '0') + '/' + String(today.getDate()).padStart(2, '0');
  time = today.getHours() + ":" + today.getMinutes() + ":" + today.getSeconds();
  var elTime = document.getElementById("time");
  elTime.textContent = time;
  console.log(time);
}, 1000);

<div id="time"></div>

Answer 3

尝试这种方式，每次执行setInterval时也需要更新变量。

(function() {
  setInterval(function() {
    var today = new Date();
    var time = today.getHours() + ":" + today.getMinutes() + ":" + today.getSeconds();
    var date = today.getFullYear() + '/' + String(today.getMonth() + 1).padStart(2, '0') + '/' + String(today.getDate()).padStart(2, '0');
    time = today.getHours() + ":" + today.getMinutes() + ":" + today.getSeconds();
    var elTime = document.getElementById("time");
    elTime.textContent = time;
    console.log(time);
  }, 1000);
})()

<div id="time"></div>

Answer 4

SetInterval是一个函数调用系统。

有关信息：SetInterval不能用作精确的时钟，每个苹果之间的durrée表示口译员，根据其必须在其他地方执行的任务，它可以返回超出请求的时间段，该时间段通常是这种情况。对于1000ms的请求，它可以在1004ms，1020ms甚至更长的时间内实现呼叫。

更易于使用的本机JS时间格式=> https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Date/toLocaleTimeString

const elTime = document.getElementById("time")

ShowTime()                    // first attempt
setInterval(ShowTime, 1000)  //  next ones

function ShowTime()
{
  let t_Now = new Date()
  elTime.textContent = t_Now.toLocaleTimeString('default', { hour12:false } ) 
}

<p id="time"></p>

setInterval不更新html元素

4 个答案: