JS获取当前日期时间并定时刷新示例

2023年5月27日下午12:25 • JavaScript

获取当前日期时间并定时刷新是一个常见的前端需求，可以通过JavaScript实现。下面将详细介绍如何实现这个功能并提供两条示例说明。

步骤一：获取当前日期时间

我们可以使用JavaScript中的Date对象来获取当前日期时间。可以使用Date类的方法getYear()，getMonth()，getDay()，getHours()，getMinutes()和getSeconds()方法（分别用于获取年份、月份、日期、小时、分钟和秒）。我们可以使用这些方法获取当前日期时间。

下面是获取当前时间的JavaScript代码示例

let now = new Date();
let year = now.getFullYear(); //获取完整的年份(4位)
let month = now.getMonth() + 1; //获取当前月份(0-11,0代表1月)
let date = now.getDate(); //获取当前日(1-31)
let hour = now.getHours(); //获取当前小时数(0-23)
let minute = now.getMinutes(); //获取当前分钟数(0-59)
let second = now.getSeconds(); //获取当前秒数(0-59)

步骤二：定时刷新时间

接下来，我们需要使用JavaScript的计时器函数setInterval()方法定时刷新获取当前时间的代码。setInterval()方法可以重复执行一个函数，每隔一段时间就执行一次。我们可以使用setInterval()方法更新当前时间。

下面是定时刷新时间的JavaScript代码示例

setInterval(function() {
  let now = new Date();
  let year = now.getFullYear(); //获取完整的年份(4位)
  let month = now.getMonth() + 1; //获取当前月份(0-11,0代表1月)
  let date = now.getDate(); //获取当前日(1-31)
  let hour = now.getHours(); //获取当前小时数(0-23)
  let minute = now.getMinutes(); //获取当前分钟数(0-59)
  let second = now.getSeconds(); //获取当前秒数(0-59)

  let time = year + "-" + month + "-" + date + " " + hour + ":" + minute + ":" + second; //拼接时间字符串
  document.getElementById("date").innerHTML = time; // 显示时间
}, 1000); // 1000毫秒 = 1秒

我们可以将上面的代码放在一个script标签中，并在HTML页面中创建一个用于显示时间的元素，例如

<p>当前时间：<span id="date"></span></p>

上面的代码将在HTML页面中创建一个段落元素，其中一个span元素将用于显示当前时间。

示例说明：

示例一：

我们可以将上述代码应用于一个简单的HTML页面中，该页面将以1秒的间隔刷新当前时间。

<!DOCTYPE html>
<html>
  <head>
    <title>JS获取当前日期时间并定时刷新示例</title>
  </head>
  <body>
    <p>当前时间：<span id="date"></span></p>
    <script>
      setInterval(function() {
        let now = new Date();
        let year = now.getFullYear(); //获取完整的年份(4位)
        let month = now.getMonth() + 1; //获取当前月份(0-11,0代表1月)
        let date = now.getDate(); //获取当前日(1-31)
        let hour = now.getHours(); //获取当前小时数(0-23)
        let minute = now.getMinutes(); //获取当前分钟数(0-59)
        let second = now.getSeconds(); //获取当前秒数(0-59)

        let time = year + "-" + month + "-" + date + " " + hour + ":" + minute + ":" + second; //拼接时间字符串
        document.getElementById("date").innerHTML = time; // 显示时间
      }, 1000); // 1000毫秒 = 1秒
    </script>
  </body>
</html>

该示例将创建一个HTML页面，其中一个span元素将用于显示当前时间。页面将定时更新时间，并在页面上显示更新后的时间。

示例二：

我们也可以添加一些样式来美化我们的页面，例如添加一个CSS样式表和一些基本样式。

<!DOCTYPE html>
<html>
  <head>
    <title>JS获取当前日期时间并定时刷新示例</title>
    <style>
      body {
        background-color: #f1f1f1;
        font-family: Arial, sans-serif;
        font-size: 20px;
        text-align: center;
      }
      #date {
        color: #333;
        font-size: 1.5em;
        padding: 10px;
        background-color: #fff;
        border-radius: 5px;
        box-shadow: 0 0 10px rgba(0, 0, 0, 0.2);
      }
    </style>
  </head>
  <body>
    <p>当前时间：<span id="date"></span></p>
    <script>
      setInterval(function() {
        let now = new Date();
        let year = now.getFullYear(); //获取完整的年份(4位)
        let month = now.getMonth() + 1; //获取当前月份(0-11,0代表1月)
        let date = now.getDate(); //获取当前日(1-31)
        let hour = now.getHours(); //获取当前小时数(0-23)
        let minute = now.getMinutes(); //获取当前分钟数(0-59)
        let second = now.getSeconds(); //获取当前秒数(0-59)

        let time = year + "-" + month + "-" + date + " " + hour + ":" + minute + ":" + second; //拼接时间字符串
        document.getElementById("date").innerHTML = time; // 显示时间
      }, 1000); // 1000毫秒 = 1秒
    </script>
  </body>
</html>

该示例将创建一个HTML页面，其中一个span元素将用于显示当前时间。页面将定时更新时间，并在页面上显示更新后的时间。此外，该页面还应用了一些基本样式来美化页面。

本站文章如无特殊说明，均为本站原创，如若转载，请注明出处：JS获取当前日期时间并定时刷新示例 - Python技术站