如何在特定的 div 中显示时间（由 JavaScript 生成）？答案

【问题标题】：How can I show the time (generated by JavaScript) in a specific div?如何在特定的 div 中显示时间（由 JavaScript 生成）？
【发布时间】：2017-05-19 09:02:28
【问题描述】：

在学习JavaScript的时候，发现了如下代码：

function printTime() {
  var d = new Date();
  var hours = d.getHours();
  var mins = d.getMinutes();
  var secs = d.getSeconds();
  document.body.innerHTML = hours+":"+mins+":"+secs;
}

setInterval(printTime, 1000);

在 Codepen 中，当 HTML 和 CSS 部分为空时，它不会显示任何内容。主要问题是：如何在 HTML 文档的特定位置插入生成的时间？

比如时间应该放在这个div里：

<div id="time" class="main__section--time">
    /* show time here */
</div>

如何将此函数链接到 ID 或类以在此 div 中显示输出？

【问题讨论】：

标签： javascript html function time

【解决方案1】：

你必须像这样修改你的printTime函数：

function printTime() {
  var d = new Date();
  var hours = d.getHours();
  var mins = d.getMinutes();
  var secs = d.getSeconds();
  // select the div by its id
  document.getElementById("time").innerHTML = hours+":"+mins+":"+secs;
}

在下面的sn-p中试试：

function printTime() {
  var d = new Date();
  var hours = d.getHours();
  var mins = d.getMinutes();
  var secs = d.getSeconds();
  document.getElementById("time").innerHTML = hours+":"+mins+":"+secs;
}

setInterval(printTime, 1000);

<div id="time" class="main__section--time">
</div>

【讨论】：

【解决方案2】：

您只需使用document.getElementById("time").innerHTML 而不是document.body.innerHTML

【讨论】：

【解决方案3】：

您可以使用document.querySelectorAPI 和CSS selector 来引用页面上的特定元素。

var timeDisplayElement = document.querySelector('#my-time');

function printTime() {
  var d = new Date();
  var hours = d.getHours();
  var mins = d.getMinutes();
  var secs = d.getSeconds();
  timeDisplayElement.innerHTML = hours+":"+mins+":"+secs;
}

setInterval(printTime, 1000);

&lt;div id="my-time"&gt;&lt;/div&gt;

【讨论】：

【解决方案4】：

使用document.getElementById("time").innerHTML = ...

【讨论】：

【解决方案5】：

你需要用

指定 div 的 id

document.getElementById（“时间”）

然后访问它的 innerHTML 属性

function printTime() { 
     var d = new Date(); 
     var hours = d.getHours(); 
     var mins = d.getMinutes(); 
     var secs = d.getSeconds();
     document.body.innerHTML= hours+":"+mins+":"+secs;
}  
 setInterval(printTime, 1000);

【讨论】：