本教程详细介绍了如何利用原生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 构建格式化字符串
将提取到的信息与辅助数组结合，拼接成目标格式的字符串：
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操作基础。掌握这些基础知识，将为您的前端开发工作打下坚实的基础。
