如何在特定的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);