如何使用纯 JavaScript 在 HTML 元素中显示自定义格式的当前日期-js教程-PHP中文网

如何使用纯 JavaScript 在 HTML 元素中显示自定义格式的当前日期

心靈之曲

发布： 2025-11-28 11:09:37

原创

261人浏览过

如何使用纯 JavaScript 在 HTML 元素中显示自定义格式的当前日期

本教程详细介绍了如何利用纯 javascript 实现当前日期的自定义格式显示，例如“sat 20 jul 2023”，并将其动态插入到指定的 html `div` 元素中。文章将提供不依赖 jquery 的完整代码示例，并强调了常见错误及其解决方案，确保开发者能够高效、独立地实现日期展示功能。

在现代前端开发中，有时我们需要在网页上显示当前日期，并且要求以特定的、易读的格式呈现，例如“Sat 20 Jul 2023”。虽然有许多库可以简化这一过程，但在某些场景下，为了减少项目依赖或优化性能，我们可能需要使用纯 JavaScript 来实现这一功能。本文将详细讲解如何不依赖任何第三方库，仅使用原生 JavaScript 和 HTML 来完成日期格式化与显示。

核心需求分析

我们的目标是将当前日期以星期几几号月份哪一年的格式（例如 Sat 20 Jul 2023）显示在一个指定的 HTML div 元素中。这个过程需要以下几个关键步骤：

获取当前日期和时间对象。
从日期对象中提取所需的日期组件（年、月、日、星期）。
将数字表示的月份和星期转换为其对应的缩写文本。
将所有组件拼接成目标格式的字符串。
将生成的字符串插入到 HTML 页面中的指定元素。

实现步骤与代码示例

1. HTML 结构准备

首先，在您的 HTML 文件中，需要一个用于显示日期的 div 元素。请确保为其设置一个唯一的 id 属性，以便 JavaScript 能够准确地定位到它。

<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>纯 JavaScript 显示当前日期</title>
</head>
<body>
    <h1>当前日期显示</h1>
    <div id="first-date"></div>

    <!-- JavaScript 代码将放在这里或外部文件中 -->
    <script src="date-display.js"></script>
</body>
</html>

登录后复制

请注意，div 元素的 id 属性必须是 id="first-date"，而不是 id"first-date"，这是一个常见的拼写错误。

立即学习“Java免费学习笔记（深入）”；

2. JavaScript 逻辑实现

接下来是核心的 JavaScript 代码。我们将分步构建日期字符串，并将其插入到 HTML 元素中。

// 定义月份缩写数组
var months = ["Jan", "Feb", "Mar", "Apr", "May", "Jun", "Jul", "Aug", "Sep", "Oct", "Nov", "Dec"];
// 定义星期几缩写数组
var days = ["Sun", "Mon", "Tue", "Wed", "Thu", "Fri", "Sat"];

// 创建一个 Date 对象，它将包含当前的日期和时间
var today = new Date();

// 获取当前月份中的日期（1-31）
var day = today.getDate();

// 获取当前星期几（0-6，0是星期日）
var dayForText = today.getDay();

// 获取当前月份（0-11，0是1月）
var month = today.getMonth();

// 获取当前年份（四位数）
var year = today.getFullYear();

// 根据索引从定义好的数组中获取星期几和月份的文本表示
var dayName = days[dayForText];
var monthName = months[month];

// 拼接成目标格式的日期字符串
var display = dayName + " " + day + " " + monthName + " " + year;

// 将生成的日期字符串插入到 HTML 元素中
// 使用 document.getElementById() 通过 ID 获取元素，并设置其 innerHTML 属性
document.getElementById("first-date").innerHTML = display;

登录后复制

3. 完整代码示例

将上述 JavaScript 代码保存为一个 .js 文件（例如 date-display.js），并在 HTML 文件中通过 <script> 标签引入。

HTML (index.html):

vizcom.ai

AI草图渲染工具，快速将手绘草图渲染成精美的图像

139

查看详情

<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>纯 JavaScript 显示当前日期</title>
    <style>
        body {
            font-family: Arial, sans-serif;
            margin: 20px;
            text-align: center;
        }
        #first-date {
            font-size: 1.5em;
            color: #333;
            margin-top: 20px;
            font-weight: bold;
        }
    </style>
</head>
<body>
    <h1>当前日期显示</h1>
    <div id="first-date"></div>

    <!-- 推荐将 script 标签放在 </body> 标签结束之前，确保 DOM 元素已加载 -->
    <script src="date-display.js"></script>
</body>
</html>

登录后复制

JavaScript (date-display.js):

// 定义月份缩写数组
var months = ["Jan", "Feb", "Mar", "Apr", "May", "Jun", "Jul", "Aug", "Sep", "Oct", "Nov", "Dec"];
// 定义星期几缩写数组
var days = ["Sun", "Mon", "Tue", "Wed", "Thu", "Fri", "Sat"];

// 创建一个 Date 对象，它将包含当前的日期和时间
var today = new Date();

// 获取当前月份中的日期（1-31）
var day = today.getDate();

// 获取当前星期几（0-6，0是星期日）
var dayForText = today.getDay();

// 获取当前月份（0-11，0是1月）
var month = today.getMonth();

// 获取当前年份（四位数）
var year = today.getFullYear();

// 根据索引从定义好的数组中获取星期几和月份的文本表示
var dayName = days[dayForText];
var monthName = months[month];

// 拼接成目标格式的日期字符串
var display = dayName + " " + day + " " + monthName + " " + year;

// 将生成的日期字符串插入到 HTML 元素中
// 使用 document.getElementById() 通过 ID 获取元素，并设置其 innerHTML 属性
document.getElementById("first-date").innerHTML = display;

登录后复制

当您在浏览器中打开 index.html 文件时，div 元素内将显示当前的日期，例如 Sat 20 Jul 2023。

注意事项

DOM 操作方式：
- 本教程的关键在于使用 document.getElementById("elementId").innerHTML = value; 来操作 DOM。这是原生 JavaScript 获取元素并修改其内容的标准方法。
- 与此相对，jQuery 库提供了 $('.className').html(value); 或 $('#elementId').html(value); 等更简洁的语法。如果您的项目不引入 jQuery，则不能使用其提供的选择器和方法。
HTML id 属性： 确保 HTML 元素的 id 属性拼写正确，且与 JavaScript 代码中 document.getElementById() 方法的参数完全匹配。例如，id="first-date" 是正确的，而 id"first-date" 是错误的语法。

JavaScript 代码的放置位置：

为了确保 JavaScript 代码在尝试访问 HTML 元素时，该元素已经被浏览器解析并加载到 DOM 树中，通常建议将 <script> 标签放在 </body> 结束标签之前。
或者，您可以使用 DOMContentLoaded 事件监听器来确保脚本在 DOM 完全加载后执行：

document.addEventListener('DOMContentLoaded', function() {
    // 将上述所有 JavaScript 代码放在这里
    var months = ["Jan", "Feb", "Mar", "Apr", "May", "Jun", "Jul", "Aug", "Sep", "Oct", "Nov", "Dec"];
    var days = ["Sun", "Mon", "Tue", "Wed", "Thu", "Fri", "Sat"];
    var today = new Date();
    var day = today.getDate();
    var dayForText = today.getDay();
    var month = today.getMonth();
    var year = today.getFullYear();
    var display = days[dayForText] + " " + day + " " + months[month] + " " + year;
    document.getElementById("first-date").innerHTML = display;
});

登录后复制

这种方式更加健壮，尤其是在脚本可能在 HTML 元素之前加载的情况下。

总结

通过本教程，您已经掌握了如何使用纯 JavaScript 在网页上显示自定义格式的当前日期。这包括了日期对象的创建、日期组件的提取、文本格式化以及将结果插入到 HTML 元素中的完整流程。理解并运用原生 JavaScript 进行 DOM 操作是前端开发的基础技能，它不仅有助于减少对外部库的依赖，还能加深对浏览器工作原理的理解。在实际项目中，根据需求选择最合适的方法至关重要。

以上就是如何使用纯 JavaScript 在 HTML 元素中显示自定义格式的当前日期的详细内容，更多请关注php中文网其它相关文章！