javascript - JavaScript 中的数字时钟

Question

该代码是用于制作数字时钟的，在 showTime 函数中放置 setTimeout 函数有什么用，以及设置 textcontent 和 Innertext

function showTime(){
var date = new Date();
var h = date.getHours();// 0 - 23
var m = date.getMinutes(); // 0 - 59
var s = date.getSeconds(); // 0 - 59
var session = "AM";

if(h == 0){
    h = 12;
}

if(h > 12){
    h = h - 12;
    session = "PM";
}

h = (h < 10) ? "0" + h : h;
m = (m < 10) ? "0" + m : m;
s = (s < 10) ? "0" + s : s;

var time = h + ":" + m + ":" + s + " " + session;
document.getElementById("MyClockDisplay").innerText = time;
document.getElementById("MyClockDisplay").textContent = time;

setTimeout(showTime, 1000);

}

showTime();

<div id="MyClockDisplay" class="clock"></div>

Answer 1

您需要在showTime底部调用setTimeout，以便每次调用showTime都会将该函数排队以在1内再次运行第二个 - 当运行时，将在一秒后再次对该函数进行排队，依此类推。让函数使用 setTimeout 递归调用自身是使用 setInterval 的替代方法。

textContent 通常优于 innerText - 请参阅 The poor, misunderstood innerText ，但如果你只是分配而不是获取，那就没有多大关系了。 innerHTML 在这里不合适，因为您分配的是文本，而不是HTML 标记。

使用 setInterval 而不是递归 setTimeout 看起来像这样，完成完全相同的事情:

function showTime() {
  var date = new Date();
  var h = date.getHours(); // 0 - 23
  var m = date.getMinutes(); // 0 - 59
  var s = date.getSeconds(); // 0 - 59
  var session = "AM";

  if (h == 0) {
    h = 12;
  }

  if (h > 12) {
    h = h - 12;
    session = "PM";
  }

  h = (h < 10) ? "0" + h : h;
  m = (m < 10) ? "0" + m : m;
  s = (s < 10) ? "0" + s : s;

  var time = h + ":" + m + ":" + s + " " + session;
  document.getElementById("MyClockDisplay").innerText = time;
  document.getElementById("MyClockDisplay").textContent = time;
}

showTime();
setInterval(showTime, 1000);

<div id="MyClockDisplay" class="clock"></div>