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

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

DDD

发布： 2025-11-27 15:41:57

原创

362人浏览过

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

本教程详细介绍了如何利用原生javascript，不依赖jquery，获取并格式化当前日期为"sat 20 jul 2023"样式，并将其动态展示在html页面指定div元素中。文章将涵盖日期对象的创建、日期组件的提取、自定义格式化逻辑以及将结果渲染到dom的完整实现过程。

1. 概述与核心概念

在网页开发中，动态显示当前日期是一个常见需求。虽然许多JavaScript库（如jQuery）提供了便捷的DOM操作方法，但在追求极致性能或避免额外依赖的场景下，使用原生JavaScript实现此功能更为高效。本教程将引导您通过原生API，将当前日期以"星期缩写日期月份缩写年份"（例如 "Sat 20 Jul 2023"）的格式显示在指定的HTML元素中。

核心概念在于利用JavaScript内置的Date对象来获取日期信息，并通过字符串拼接的方式构建自定义的日期格式。

2. 获取与格式化当前日期

JavaScript的Date对象提供了获取当前日期和时间的强大功能。为了实现自定义格式，我们需要分步提取日期、月份、年份和星期。

2.1 初始化日期对象

首先，创建一个Date对象实例来获取当前的日期和时间：

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

var today = new Date();

登录后复制

2.2 定义辅助数组

由于getMonth()返回的是0-11的数字（0代表一月），getDay()返回的是0-6的数字（0代表周日），我们需要自定义数组来映射到对应的月份缩写和星期缩写。

var months = ["Jan", "Feb", "Mar", "Apr", "May", "Jun", "Jul", "Aug", "Sep", "Oct", "Nov", "Dec"];
var days = ["Sun", "Mon", "Tue", "Wed", "Thu", "Fri", "Sat"];

登录后复制

2.3 提取日期组件

使用Date对象的方法提取所需的日期信息：

today.getDate(): 获取月份中的日期（1-31）。
today.getMonth(): 获取月份（0-11）。
today.getFullYear(): 获取四位数的年份。
today.getDay(): 获取星期几（0代表周日，6代表周六）。

var day = today.getDate(); // 示例：20
var dayForText = today.getDay(); // 示例：6 (代表周六)
var month = today.getMonth(); // 示例：6 (代表七月)
var year = today.getFullYear(); // 示例：2023

登录后复制

2.4 构建格式化字符串

将提取到的信息与辅助数组结合，拼接成目标格式的字符串：

Spacely AI

为您的房间提供AI室内设计解决方案，寻找无限的创意

查看详情

var display = days[dayForText] + " " + day + " " + months[month] + " " + year;
// 示例结果："Sat 20 Jul 2023"

登录后复制

3. 将日期显示到HTML元素

构建好日期字符串后，下一步是将其插入到HTML页面中的指定元素。这里我们将使用原生JavaScript的DOM操作方法。

3.1 准备HTML元素

在HTML中，创建一个带有特定ID的div元素，用于显示日期。

<div id="first-date"></div>

登录后复制

3.2 渲染日期到DOM

使用document.getElementById()方法获取到目标HTML元素，然后通过innerHTML属性将格式化后的日期字符串赋值给它。

document.getElementById("first-date").innerHTML = display;

登录后复制

重要提示： 在原生JavaScript环境中，请避免使用类似$('.first-date').html(display);的jQuery语法，这会导致代码无法执行，因为浏览器不识别jQuery的选择器和方法。

4. 完整代码示例

将上述所有步骤整合，以下是完整的JavaScript代码和对应的HTML结构：

<!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>

    <script>
        // 定义月份缩写数组
        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(); // 月份中的日期 (1-31)
        var dayForText = today.getDay(); // 星期几 (0-6, 0为周日)
        var month = today.getMonth(); // 月份 (0-11, 0为一月)
        var year = today.getFullYear(); // 四位数的年份

        // 格式化日期字符串
        var display = days[dayForText] + " " + day + " " + months[month] + " " + year;

        // 将格式化后的日期显示到指定的HTML元素中
        document.getElementById("first-date").innerHTML = display;
    </script>

</body>
</html>

登录后复制

5. 注意事项与最佳实践

脚本位置： 确保JavaScript代码在对应的HTML元素（div）加载之后执行。最常见的做法是将<script>标签放在<body>的底部，或者在<head>中使用defer属性（例如：<script defer src="your-script.js"></script>）来延迟脚本执行直到DOM完全解析。
代码可读性： 使用有意义的变量名和注释可以提高代码的可读性和维护性。
错误处理： 对于更复杂的场景，可以考虑添加错误处理机制，例如检查document.getElementById()是否成功获取到元素。
国际化： 如果需要支持多种语言或地区日期格式，可以考虑使用Date.prototype.toLocaleDateString()方法，它能根据用户浏览器设置自动格式化日期。然而，对于本教程中自定义的特定格式，手动拼接字符串是更直接的方法。

6. 总结

通过本教程，您已掌握了如何使用纯JavaScript获取当前日期，将其格式化为"Sat 20 Jul 2023"样式，并动态显示在HTML页面中的方法。这种不依赖外部库的实现方式不仅轻量高效，而且有助于深入理解JavaScript的Date对象和DOM操作基础。掌握这些基础知识，将为您的前端开发工作打下坚实的基础。

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

大家都在看：

JavaScript数组最大值与最小值查找：健壮性与性能兼顾的实现指南构建可点击搜索栏：实现自定义URL与动态筛选使用纯JavaScript在HTML中显示指定格式的当前日期 JavaScript动态重构数据对象的实践指南前端开发：使用数据属性和事件委托实现按钮动态修改文本内容的最佳实践