使用纯J*aScript在HTML中显示指定格式的当前日期

新闻中心 NEWS CENTER

您当前位置：首页 > 新闻中心 > 网络学院

使用纯J*aScript在HTML中显示指定格式的当前日期

2025-11-27

浏览次数：次

返回列表

使用纯javascript在html中显示指定格式的当前日期

本文将详细介绍如何利用纯J*aScript，在不依赖jQuery的情况下，获取并以“星期几日期月份年份”的特定格式（例如：Sat 20 Jul 2025）显示当前日期。教程涵盖了J*aScript Date对象的用法、日期组件的提取与格式化，以及如何将结果安全地注入到HTML元素中，旨在提供一个轻量且高效的日期显示解决方案。

使用纯J*aScript显示格式化日期

在现代Web开发中，减少对大型库的依赖，转而使用原生J*aScript（Vanilla JS）来实现特定功能，已成为一种趋势。这不仅可以减小页面加载负担，还能提高执行效率。本教程将引导您如何不借助jQuery，仅使用原生J*aScript来获取当前日期，并将其按照“星期几日期月份年份”（例如：Sat 20 Jul 2025）的格式显示在HTML页面中的指定元素内。

1. 获取当前日期和时间

J*aScript提供了内置的Date对象，用于处理日期和时间。通过创建一个Date实例，我们可以获取当前的系统日期和时间。

var today = new Date();

2. 提取日期组件

从Date对象中，我们可以提取出年、月、日、星期几等信息。

getFullYear(): 获取四位数的年份（例如：2025）。
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();         // 获取年份，例如 2025

3. 格式化日期字符串

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

语鲸

AI智能阅读辅助工具

314 查看详情

var display = days[dayOfWeekIndex] + " " + dayOfMonth + " " + months[monthIndex] + " " + year;
// 示例输出: "Sat 20 Jul 2025"

4. 将格式化日期显示在HTML元素中

这是将日期信息呈现在用户界面上的关键一步。与jQuery使用$('.first-date').html(display);不同，原生J*aScript通过document.getElementById()方法获取到指定ID的HTML元素，然后使用其innerHTML属性来设置内容。

假设您的HTML结构中有一个div元素，其ID为first-date：

<div id="first-date"></div>

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

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

完整的代码示例

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

HTML (index.html):




    
    
    显示当前日期



    当前日期：
    <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] + &quot; " + dayOfMonth + " " + months[monthIndex] + " " + year;

        // 将格式化后的日期显示在ID为"first-date"的div中
        // 确保DOM元素在脚本执行时已经加载
        document.getElementById(&quot;first-date&quot;).innerHTML = display;
    </script>