JS实现网页标题栏显示当前时间和日期的完整代码

2023年5月27日下午3:55 • JavaScript

下面我为你讲解一下 JS 实现网页标题栏显示当前时间和日期的完整代码攻略。

首先，我们需要了解两个 Javascript 方法：setInterval() 和 toLocaleTimeString()。

setInterval() 方法会以指定的时间间隔（以毫秒为单位）重复调用某个函数。可用于创建定期执行的函数（也称为时间间隔函数）。

toLocaleTimeString() 方法可根据本地时间将 Date 对象转换为字符串，并返回指定日期的时间部分，可选地包括毫秒和时区。这里我们使用的是本地时间。

其次，我们需要创建一个函数，在函数内部获取当前时间，并将其格式化成符合我们需求的字符串。

下面是完整的代码攻略：

首先，在 HTML 中添加一个空的标题标签：

<head>
  <title></title>
</head>

在 JavaScript 中，创建一个函数来获取当前时间和日期。以下是这个函数的完整代码，并使用 setInterval() 方法每秒调用一次此函数：

function updateTime() {
  const currentDate = new Date(); // 获取当前日期和时间
  const options = { hour12: false }; // 时间格式选项，hour12 属性设为 false 表示使用 24 小时制
  const timeString = currentDate.toLocaleTimeString(undefined, options); // 格式化后的时间字符串
  const dateString = currentDate.toDateString(); // 格式化后的日期字符串
  document.title = `${timeString} | ${dateString}`; // 将标题标签的文本改为格式化后的字符串
}

setInterval(updateTime, 1000); // 每秒调用 updateTime 函数

注：以上代码中的 undefined 参数表示使用浏览器的默认语言。

示例

3.1 在标题栏显示只有时间的格式

在 options 对象中增加 timeZone: 'Asia/Shanghai' 即可设置为北京时间，并删除 dateString 部分：

function updateTime() {
  const currentDate = new Date(); // 获取当前日期和时间
  const options = { hour12: false, timeZone: 'Asia/Shanghai' }; // 时间格式选项，hour12 设为 false 表示使用 24 小时制
  const timeString = currentDate.toLocaleTimeString(undefined, options); // 格式化后的时间字符串
  document.title = timeString; // 将标题标签的文本改为格式化后的字符串
}

setInterval(updateTime, 1000); // 每秒调用 updateTime 函数

3.2 在网页中添加当前日期和时间

在文档中添加一个元素，使用 innerHTML 属性来显示格式化后的日期和时间：

<!DOCTYPE html>
<html>
<head>
    <title></title>
</head>
<body>
    <p id="time"></p>
    <script type="text/javascript">
        function updateTime() {
            const currentDate = new Date();
            const options = {hour12: false};
            const timeString = currentDate.toLocaleTimeString(undefined, options);
            const dateString = currentDate.toDateString();
            document.title = `${timeString} | ${dateString}`;
            document.getElementById('time').innerHTML = `${timeString} ${dateString}`; // 设置显示时间和日期的元素
        }

        setInterval(updateTime, 1000);
    </script>
</body>
</html>

以上就是 JS 实现网页标题栏显示当前时间和日期的完整代码攻略。希望对您有帮助。

本站文章如无特殊说明，均为本站原创，如若转载，请注明出处：JS实现网页标题栏显示当前时间和日期的完整代码 - Python技术站