Question

代码用于制作数字时钟，在setTimeout函数中放置showTime函数的用法是什么？设置textcontent和{{1}的用途是什么}}

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();

Answer 1

您需要在setTimeout的底部调用showTime，以便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>

Answer 2

使用 setTimeout 是为下一秒设置下一个倒计时。

使用 Innertext 是将时间字符串设置为元素。

Innertext 和 textcontent 在此处相同。

也许你可以尝试如下SetInterval更准确：

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);

Javascript中的数字时钟

2 个答案: