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

Question

虽然学习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输出？

Answer 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; 
} 

尝试在下面的代码段：

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>

Answer 2

而不是document.body.innerHTML你只想用document.getElementById("time").innerHTML

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

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

Answer 4

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

Answer 5

您需要与

的document.getElementById（ “时代”）

，然后访问指定的div的id它是inne rHTML属性

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