本文将详细介绍如何利用纯JavaScript，在不依赖jQuery的情况下，获取并以“星期几 日期 月份 年份”的特定格式（例如：Sat 20 Jul 2023）显示当前日期。教程涵盖了JavaScript Date对象的用法、日期组件的提取与格式化，以及如何将结果安全地注入到HTML元素中，旨在提供一个轻量且高效的日期显示解决方案。
使用纯JavaScript显示格式化日期
在现代Web开发中，减少对大型库的依赖，转而使用原生JavaScript（Vanilla JS）来实现特定功能，已成为一种趋势。这不仅可以减小页面加载负担，还能提高执行效率。本教程将引导您如何不借助jQuery，仅使用原生JavaScript来获取当前日期，并将其按照“星期几 日期 月份 年份”（例如：Sat 20 Jul 2023）的格式显示在HTML页面中的指定元素内。
1. 获取当前日期和时间
JavaScript提供了内置的Date对象，用于处理日期和时间。通过创建一个Date实例，我们可以获取当前的系统日期和时间。
var today = new Date();
2. 提取日期组件
从Date对象中，我们可以提取出年、月、日、星期几等信息。
立即学习“Java免费学习笔记（深入）”；
- getFullYear(): 获取四位数的年份（例如：2023）。
- getMonth(): 获取月份，返回一个0到11的整数，其中0代表一月，11代表十二月。
- getDate(): 获取一个月中的日期，返回一个1到31的整数。
- getDay(): 获取一个星期中的星期几，返回一个0到6的整数，其中0代表星期日，6代表星期六。
为了将这些数值转换为我们所需的文本格式（例如，将getMonth()返回的7转换为“Jul”，将getDay()返回的6转换为“Sat”），我们需要创建辅助数组。
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 dayOfMonth = today.getDate(); // 获取日期，例如 20 var dayOfWeekIndex = today.getDay(); // 获取星期几的索引，例如 6 (代表Sat) var monthIndex = today.getMonth(); // 获取月份的索引，例如 6 (代表Jul) var year = today.getFullYear(); // 获取年份，例如 2023
3. 格式化日期字符串
有了所有的日期组件，我们就可以按照目标格式“星期几 日期 月份 年份”来构建最终的字符串。
var display = days[dayOfWeekIndex] + " " + dayOfMonth + " " + months[monthIndex] + " " + year; // 示例输出: "Sat 20 Jul 2023"
4. 将格式化日期显示在HTML元素中
这是将日期信息呈现在用户界面上的关键一步。与jQuery使用$('.first-date').html(display);不同，原生JavaScript通过document.getElementById()方法获取到指定ID的HTML元素，然后使用其innerHTML属性来设置内容。
假设您的HTML结构中有一个div元素，其ID为first-date：
<div id="first-date"></div>
您可以使用以下JavaScript代码将格式化后的日期字符串插入到该div中：
document.getElementById("first-date").innerHTML = display;完整的代码示例
结合以上所有步骤，以下是完整的HTML和JavaScript代码，用于在页面加载时显示当前日期：
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>显示当前日期</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"];
// 创建一个Date对象，获取当前日期和时间
var today = new Date();
// 提取日期组件
var dayOfMonth = today.getDate(); // 获取一个月中的日期 (1-31)
var dayOfWeekIndex = today.getDay(); // 获取星期几的索引 (0-6)
var monthIndex = today.getMonth(); // 获取月份的索引 (0-11)
var year = today.getFullYear(); // 获取四位数的年份
// 格式化日期字符串
var display = days[dayOfWeekIndex] + " " + dayOfMonth + " " + months[monthIndex] + " " + year;
// 将格式化后的日期显示在ID为"first-date"的div中
// 确保DOM元素在脚本执行时已经加载
document.getElementById("first-date").innerHTML = display;
</script>
</body>
</html>注意事项
- 脚本位置： 将<script>标签放置在<body>的末尾，</body>关闭标签之前，可以确保在脚本尝试访问document.getElementById("first-date")时，该HTML元素已经完全加载并存在于DOM中。另一种方式是在<script>标签上添加defer属性，或者将脚本放在DOMContentLoaded事件监听器内部。
- ID唯一性： document.getElementById()方法依赖于HTML元素的id属性，该属性在整个文档中必须是唯一的。
- 时区： new Date()默认使用客户端设备的本地时区。如果您的应用程序需要处理特定时区或UTC时间，您可能需要使用getUTCFullYear()、getUTCMonth()等方法，或借助更高级的日期库。
- 国际化： 本教程中使用的月份和星期缩写是硬编码的英文。对于需要支持多语言的应用程序，您应该考虑使用Intl.DateTimeFormat API或第三方国际化库来动态生成本地化的日期字符串。
总结
通过本教程，您已经掌握了如何使用纯JavaScript来获取、格式化并显示当前日期，而无需引入外部库。这种方法不仅轻量高效，而且有助于您更深入地理解原生JavaScript在DOM操作和日期处理方面的能力。在构建高性能和无依赖的Web应用时，掌握这些基本技能至关重要。
