首页 > 文章 > 前端

JavaScript获取当前日期并格式化显示

时间：2025-12-23 14:01:07 488浏览收藏

来到golang学习网的大家，相信都是编程学习爱好者，希望在这里学习文章相关编程知识。下面本篇文章就来带大家聊聊《JavaScript 获取当前日期并格式化显示》，介绍一下，希望对大家的知识积累有所帮助，助力实战开发！

如何使用纯 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"，这是一个常见的拼写错误。

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 文件中通过