使用纯JavaScript在HTML中显示指定格式的当前日期-js教程-PHP中文网

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

心靈之曲

发布： 2025-11-27 15:07:35

原创

941人浏览过

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

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

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

ima.copilot

腾讯大混元模型推出的智能工作台产品，提供知识库管理、AI问答、智能写作等功能

317

查看详情

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或第三方国际化库来动态生成本地化的日期字符串。