本教程详细介绍了如何利用纯 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> 标签引入。</script>
HTML (index.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>
<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> 标签放在 </script>
