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

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

核心需求分析

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

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

实现步骤与代码示例

1. HTML 结构准备

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

    
    
    


    
当前日期显示
    

    
    

请注意，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 文件中通过

HTML (index.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 2025。

注意事项

1. DOM 操作方式：

   • 本教程的关键在于使用 document.getElementById("elementId").innerHTML = value; 来操作 DOM。这是原生 JavaScript 获取元素并修改其内容的标准方法。
   • 与此相对，jQuery 库提供了 $('.className').html(value); 或 $('#elementId').html(value); 等更简洁的语法。如果您的项目不引入 jQuery，则不能使用其提供的选择器和方法。

2. HTML id 属性： 确保 HTML 元素的 id 属性拼写正确，且与 JavaScript 代码中 document.getElementById() 方法的参数完全匹配。例如，id="first-date" 是正确的，而 id"first-date" 是错误的语法。

3. JavaScript 代码的放置位置：

   • 为了确保 JavaScript 代码在尝试访问 HTML 元素时，该元素已经被浏览器解析并加载到 DOM 树中，通常建议将