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

在下面的代码中尝试：

＆＃13;

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

＆＃13;

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

＆＃13;

Answer 2

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

Answer 3

您可以将document.querySelector API与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

您需要使用

指定div的ID

document.getElementById（＆＃34; time＆＃34;）

然后访问它的innerHTML属性

<select ng-model="sltStatus" id="sltStatusFilter" multiple class="right">
    <option value="0">View All</option>
    <option value="1">Study 1</option>
    <option value="2">Study 2</option>
    <option value="3">Study 3</option>
    <option value="4">Study 4</option>
</select>

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

5 个答案: