有人可以向我解释这个 JavaScript 实时时钟吗？答案

【问题标题】：Can someone explain this JavaScript Real-time clock to me?有人可以向我解释这个 JavaScript 实时时钟吗？
【发布时间】：2010-12-23 20:24:00
【问题描述】：

<html>
<head>
<script type="text/javascript">
function startTime()
{
var today=new Date();
var h=today.getHours();
var m=today.getMinutes();
var s=today.getSeconds();
h=checkTime(h);
m=checkTime(m);
s=checkTime(s);
document.getElementById('txt').innerHTML=h+":"+m+":"+s;
t=setTimeout('startTime()',500);
}

function checkTime(i)
{
if (i<10)
  {
  i="0" + i;
  }
return i;
}
</script>
</head>

<body onload="startTime()">
<div id="txt"></div>
</body>
</html>

我只是不太明白这两行：

document.getElementById('txt').innerHTML=h+":"+m+":"+s;
t=setTimeout('startTime()',500);

有人能用文字解释一下吗？ getElementById('txt')、innerHTML 和 setTimeout('startTime()',500) 有什么作用？

【问题讨论】：

标签： javascript time clock

【解决方案1】：

请参阅documentation。

getElementById 获取具有给定 ID 的 HTML DOM element
DOM 元素的 innerHTML 属性指定元素的 HTML
setTimeout 方法在指定的毫秒数后运行一个函数
请注意，此代码是非常糟糕的做法；从不将字符串传递给setTimeout。
应该是setTimeout(startTime, 500)，传递函数本身。
你甚至可以传递一个匿名函数：
```
setTimeout(function() { alert('Five seconds later...'); }, 5000);
```

【讨论】：

<div id='txt'>The Clock</div>, document.getElementById('txt').innerHTML 将 div（或其他任何值）的“值”设置为当前时间。
另一个不好的做法是使用setTimeout() 来确保DOM 准备就绪。在大多数情况下会，但它绝对会在 500 毫秒后准备好吗？
@Daniel：他不是。该函数由onload调用； setTimeout 用于更新时钟。
@SLaks：你说得对。这将教我在完全阅读代码之前回答一个问题：P。
Waaait...那么是 string(?) 'startTime()' 和 startTime 的区别是什么？

【解决方案2】：

第一行获取页面上具有id 属性txt（在本例中为<div>）的元素，并将内容（innerHTML）设置为带有格式化时间的字符串。

第二行在 JavaScript 中设置了一个计时器，以在 500 毫秒后再次调用相同的函数。实质上是下次更新时钟。注意这是每半秒一次。它的值应该是 1000。

【讨论】：

【解决方案3】：

每个 HTML 元素都可以分配一个 id 属性，该属性唯一地定义它。

代码

document.getElementById('txt')

返回对 DOM 对象的引用，该对象代表一些带有 id txt 的 HTML 元素。

该对象的innerHTML 属性表示该元素内的HTML。如果您为该属性分配一个字符串，则该字符串将替换以前存在的 HTML

setTimeout 函数设置了一个超时，这样一旦提供的超时（以毫秒为单位）到期，它将执行提供的函数。

你的情况

 setTimeout('startTime()',500);

将在 500 毫秒内执行函数 startTime。

setTimeout 返回一个可用于稍后取消请求的标识。

您可以在 MDN 上找到更多关于 getElementById 和 setTimeout 的信息，或者通过一些明智的谷歌搜索（或 Binging 或 Lycosing 等）

【讨论】：

【解决方案4】：

document.getElementById('txt') 告诉浏览器您要操作 id 为“txt”的元素（在本例中为空 div）。

.innerHTML 部分意味着您只想将 div 内的 HTML 更改为接下来指定的某个值。

setTimeout('startTime()',500) 用于在一定时间后执行函数。第一个参数（startTime()）是你要执行哪个函数，第二个参数（500）表示执行函数前要等待多少毫秒。当setTimeout调用它所在的函数时，这意味着页面将每500毫秒（或指定的毫秒数）循环一次函数

【讨论】：

【解决方案5】：

如果您查看 HTML，您会看到有一个 <div id="txt">。 getElementById('txt') 方法就像它听起来的那样，它获取 ID 为 txt 的 <div>。 innerHTML 属性将获取 <div> 中的内容，并允许您更改其中的内容。

setTimeout() 是一种允许您延迟执行特定功能的方法。它接受一个函数和一个以毫秒为单位的时间。在这种情况下，将在 500 毫秒后调用 startTime() 函数。 ~~我的猜测是它在那里允许整个 DOM 树在运行函数之前加载。~~我读错了代码。 setTimeout() 调用用于递归调用 startTime()，但会插入 500 毫秒的延迟，因此浏览器不会在尝试运行无限循环时冻结。

【讨论】：