使用 setTimeout 在 JavaScript 中实现实时时钟显示

实现原理与目标

要实现实时显示当前时间的功能，核心逻辑在于周期性执行两个操作：一是获取系统当前的日期和时间信息，二是将这些信息格式化为字符串并插入到网页的指定位置。JavaScript 中的 Date 对象提供了获取时间的能力，而 setTimeout 或 setInterval 则负责控制执行的频率。本文将演示如何使用 setTimeout 递归调用的方式来模拟实时刷新。

第1步：准备 HTML 结构与样式

首先需要在 HTML 页面中创建一个用于显示时间的容器，并为它设置一个唯一的 ID（例如 time），以便后续通过 JavaScript 进行操作。同时可以添加简单的 CSS 样式来美化显示区域。

<div id="time" style="background-color:#eee;padding:10px;font-size:18px;">
 <script type="text/javascript">showtime();</script>
</div>

注意：在 body 加载时立即调用一次 showtime() 函数，确保页面初始状态就能显示时间，避免等待第一秒刷新出现空白。

第2步：编写 JavaScript 逻辑

定义一个名为 showtime 的函数，在该函数内部完成时间获取、格式化及 DOM 更新的操作。

1. 获取时间对象： 使用 var myDate = new Date(); 创建当前时间的实例。
2. 提取时分秒： 调用 myDate.getHours()、myDate.getMinutes() 和 myDate.getSeconds() 分别获取小时、分钟和秒数。
3. 拼接字符串： 将上述数值组合成符合阅读习惯的格式，如 "HH时MM分SS秒"。
4. 更新 DOM： 使用 document.getElementById("time").innerHTML 将格式化后的时间字符串赋值给对应的 div 元素。
5. 设置定时器： 调用 setTimeout("showtime()", 1000); 安排函数在 1000 毫秒（即 1 秒）后再次执行，从而实现循环更新。

function showtime() {
 var myDate = new Date();
 document.getElementById("time").innerHTML = 
 myDate.getHours() + "时" + 
 myDate.getMinutes() + "分" + 
 myDate.getSeconds() + "秒";
 setTimeout("showtime()", 1000);
}

第3步：完整代码整合

将 HTML 结构、CSS 样式和 JavaScript 脚本整合到一个完整的 HTML 文件中。以下是实现该功能的完整示例代码：

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" 
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
 <head>
 <meta http-equiv="content-type" content="text/html;charset=gb2312" />
 <title>JS小测试</title>
 </head>
 <body>
  <style type="text/css">
   #time {
    background-color:#eee;
    padding: 5px;
   }
  </style>
  <script type="text/javascript">
   function showtime() {
    var myDate = new Date();
    document.getElementById("time").innerHTML = 
     myDate.getHours() + "时" + 
     myDate.getMinutes() + "分" + 
     myDate.getSeconds() + "秒";
    setTimeout("showtime()", 1000);
   }
</script>
  <div id="time">
   <script type="text/javascript">showtime();</script>
  </div>
 </body>
</html>

注意事项与优化建议

虽然上述方法简单易用，但在实际开发中需要注意以下几点：

• 字符串拼接性能： 在频繁执行的定时器中使用字符串拼接可能带来轻微的性能开销，对于现代浏览器而言通常可忽略，但更高效的写法是使用模板字符串或数组 join。
• 单例数字补零： 示例代码直接输出数字，若希望显示 "09时" 而非 "9时"，需要对小于 10 的数字进行前补零处理（如添加辅助函数）。
• 内存管理： 长期运行的页面如果仅使用 setTimeout 递归调用，需注意闭包引用可能导致变量无法被垃圾回收，适当情况下可考虑改用 setInterval 并配合清理机制。

总结

通过上述步骤，我们成功利用 JavaScript 的 Date 对象和 setTimeout 函数实现了网页上的实时时钟显示。这种方法结构简单，易于理解，适合初学者掌握 DOM 操作与定时器的基本用法。以上就是 JavaScript 通过 setTimeout 实时显示当前时间方法的详细内容，更多关于 JavaScript 定时器和 DOM 操作的资料请关注本站其它相关文章！