js 显示日期时间的实例(时间过一秒加1)

2023年5月27日下午1:38 • JavaScript

当我们需要在页面中显示当前的日期时间时，可以使用 JavaScript 编写代码来实现。我们可以使用Date()对象来获取当前的日期时间，并使用setInterval()函数来每秒更新时间。下面是一个基本的实例，可以每秒钟更新显示的时间：

代码实现

<p id="time"></p>
<script>
  setInterval(function() {
    var date = new Date();
    var time = date.toLocaleTimeString();
    document.getElementById("time").innerHTML = time;
  }, 1000);
</script>

代码说明

首先我们使用setInterval()函数，指定了每隔一秒该函数内的代码块就会执行一次；
在该代码块内，我们使用Date()对象创建了一个日期时间对象，并使用toLocaleTimeString()函数获取了当前的时间，并将其存储在了一个变量中；
最后，我们使用document.getElementById()函数获取了指定的<p>元素，并使用innerHTML属性将获取到的时间输出到了该元素中。

除了以上的代码实现，我们还可以使用另外一种常见的方法，即在页面中使用<span>元素显示日期时间。下面我们来看一下该实例的完整代码和注释说明：

代码实现

<!DOCTYPE html>
<html>
<head>
  <meta charset="UTF-8">
  <title>JS 显示日期时间的实例</title>
  <style>
    #datetime {
      font-size: 24px;
      color: blue;
    }
  </style>
</head>
<body>
  <!--在页面中添加一个 id 为 datetime 的 <span> 元素-->
  <span id="datetime"></span>

  <script>
    // 使用 setInterval() 函数每隔一秒更新时间
    setInterval(function() {
      // 创建一个新的 Date() 对象获取当前时间
      var date = new Date();
      // 获取小时、分钟和秒
      var hours = date.getHours();
      var minutes = date.getMinutes();
      var seconds = date.getSeconds();
      // 根据上述内容拼接显示的时间字符串
      var time = hours + ":" + minutes + ":" + seconds;
      // 获取页面中的 <span> 元素
      var realtime = document.getElementById("datetime");
      // 更新 <span> 元素中的时间
      realtime.innerHTML = time;
    }, 1000);
  </script>
</body>
</html>

代码说明

首先我们在页面中添加了一个<span>元素，并给其指定了一个id为datetime；
然后我们在页面的<head>部分添加了一个 CSS 样式，将字体大小设置为 24 像素，颜色设置为蓝色；
在<script>标签中，我们使用setInterval()函数每隔一秒更新时间；
在更新时间的函数内，我们创建了一个新的Date()对象来获取当前时间，并使用getHours()、getMinutes()和getSeconds()方法来获取小时、分钟和秒数；
然后，我们使用字符串拼接的方式将获取到的时间值合并成一个字符串，并将其存储在一个变量中；
最后，我们使用document.getElementById()方法获取页面中的<span>元素，并使用innerHTML属性将时间字符串更新到该元素中。