本文将详细介绍如何利用纯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. 格式化日期字符串

有了所有的日期组件，我们就可以按照目标格式“星期几 日期 月份 年份”来构建最终的字符串。

X Detector

最值得信赖的多语言 AI 内容检测器

下载

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：

您可以使用以下JavaScript代码将格式化后的日期字符串插入到该div中：

document.getElementById("first-date").innerHTML = display;

完整的代码示例

结合以上所有步骤，以下是完整的HTML和JavaScript代码，用于在页面加载时显示当前日期：

HTML (index.html):

    
    
    



    
当前日期：
    


    

注意事项

1. 脚本位置： 将