如何在HTML中实现此JavaScript

How to implement this JavaScript in HTML

本文关键字：实现 JavaScript HTML      更新时间：2023-09-26

这是一个显示时间小时、分钟和秒的JavaScript，现在秒在滴答作响，分钟在变化，这不是静态的，我有问题。如何在HTML页面中实现它？

<script type="text/javascript">
  function startTime() {
      var today = new Date();
      var h = today.getHours();
      var m = today.getMinutes();
      var s = today.getSeconds();
      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>

将您的身体标签编辑为

<body  onload="startTime()">
<span id="txt">10:26:07</span>

然后在您希望时钟出现的地方添加以下代码

只需执行：

<span id="txt"></span>
<script type="text/javascript">
  function startTime() {
      var today = new Date();
      var h = today.getHours();
      var m = today.getMinutes();
      var s = today.getSeconds();
      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;
  }
  startTime();
</script>

您的Javascript函数可能有很多版本的HTML标记：

其中一个可能是：

<div id="txt">
</div>
<button type="button" name="click" onclick="startTime()">Click Me!</button>

演示FIDDLE

  • 页面上需要一个ID为txt的元素（请参阅脚本）
  • 您需要启动/调用函数执行startTime();
  • 为了允许JS DOM解析器找到您的#txt，请将<script>放在关闭的</body>标记之前

<div id="txt"></div>
<script>
  const startTime = (elTarget) => {
    const now = new Date();
    const h = now.getHours();
    let m = now.getMinutes();
    let s = now.getSeconds();
    m = `${m}`.padStart(2, "0");
    s = `${s}`.padStart(2, "0");
    elTarget.textContent = `${h}:${m}:${s}`;
    setTimeout(startTime.bind(null, elTarget), 1000);
  };
  startTime(document.querySelector("#txt"));
</script>
<!-- closing </body> tag here -->

相关文章：