如何使用纯 J*aScript 在 HTML 元素中显示自定义格式的当前日期

新闻中心 NEWS CENTER

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

如何使用纯 J*aScript 在 HTML 元素中显示自定义格式的当前日期

2025-11-28

浏览次数：次

返回列表

如何使用纯 JavaScript 在 HTML 元素中显示自定义格式的当前日期

本教程详细介绍了如何利用纯 j*ascript 实现当前日期的自定义格式显示，例如“sat 20 jul 2025”，并将其动态插入到指定的 html `div` 元素中。文章将提供不依赖 jquery 的完整代码示例，并强调了常见错误及其解决方案，确保开发者能够高效、独立地实现日期展示功能。

在现代前端开发中，有时我们需要在网页上显示当前日期，并且要求以特定的、易读的格式呈现，例如“Sat 20 Jul 2025”。虽然有许多库可以简化这一过程，但在某些场景下，为了减少项目依赖或优化性能，我们可能需要使用纯 J*aScript 来实现这一功能。本文将详细讲解如何不依赖任何第三方库，仅使用原生 J*aScript 和 HTML 来完成日期格式化与显示。

核心需求分析

我们的目标是将当前日期以星期几几号月份哪一年的格式（例如 Sat 20 Jul 2025）显示在一个指定的 HTML div 元素中。这个过程需要以下几个关键步骤：

获取当前日期和时间对象。
从日期对象中提取所需的日期组件（年、月、日、星期）。
将数字表示的月份和星期转换为其对应的缩写文本。
将所有组件拼接成目标格式的字符串。
将生成的字符串插入到 HTML 页面中的指定元素。

实现步骤与代码示例

1. HTML 结构准备

首先，在您的 HTML 文件中，需要一个用于显示日期的 div 元素。请确保为其设置一个唯一的 id 属性，以便 J*aScript 能够准确地定位到它。

<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>纯 J*aScript 显示当前日期</title>
</head>
<body>
    <h1>当前日期显示</h1>
    <div id="first-date"></div>

    <!-- J*aScript 代码将放在这里或外部文件中 -->
    <script src="date-display.js"></script>
</body>
</html>

请注意，div 元素的 id 属性必须是 id="first-date"，而不是 id"first-date"，这是一个常见的拼写错误。

2. J*aScript 逻辑实现

接下来是核心的 J*aScript 代码。我们将分步构建日期字符串，并将其插入到 HTML 元素中。

// 定义月份缩写数组
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();

// 获取当前月份中的日期（1-31）
var day = today.getDate();

// 获取当前星期几（0-6，0是星期日）
var dayForText = today.getDay();

// 获取当前月份（0-11，0是1月）
var month = today.getMonth();

// 获取当前年份（四位数）
var year = today.getFullYear();

// 根据索引从定义好的数组中获取星期几和月份的文本表示
var dayName = days[dayForText];
var monthName = months[month];

// 拼接成目标格式的日期字符串
var display = dayName + " " + day + " " + monthName + " " + year;

// 将生成的日期字符串插入到 HTML 元素中
// 使用 document.getElementById() 通过 ID 获取元素，并设置其 innerHTML 属性
document.getElementById("first-date").innerHTML = display;

3. 完整代码示例

将上述 J*aScript 代码保存为一个 .js 文件（例如 date-display.js），并在 HTML 文件中通过 <;script> 标签引入。</script>

HTML (index.html):

语鲸

AI智能阅读辅助工具

314 查看详情

<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>纯 J*aScript 显示当前日期</title>
    <style>
        body {
            font-family: Arial, sans-serif;
            margin: 20px;
            text-align: center;
        }
        #first-date {
            font-size: 1.5em;
            color: #333;
            margin-top: 20px;
            font-weight: bold;
        }
    </style>
</head>
<body>
    <h1>当前日期显示</h1>
    <div id="first-date"></div>

    <!-- 推荐将 script 标签放在 </body> 标签结束之前，确保 DOM 元素已加载 -->
    <script src="date-display.js"></script>
</body>
</html>

J*aScript (date-display.js):

// 定义月份缩写数组
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();

// 获取当前月份中的日期（1-31）
var day = today.getDate();

// 获取当前星期几（0-6，0是星期日）
var dayForText = today.getDay();

// 获取当前月份（0-11，0是1月）
var month = today.getMonth();

// 获取当前年份（四位数）
var year = today.getFullYear();

// 根据索引从定义好的数组中获取星期几和月份的文本表示
var dayName = days[dayForText];
var monthName = months[month];

// 拼接成目标格式的日期字符串
var display = dayName + " " + day + " " + monthName + " " + year;

// 将生成的日期字符串插入到 HTML 元素中
// 使用 document.getElementById() 通过 ID 获取元素，并设置其 innerHTML 属性
document.getElementById("first-date").innerHTML = display;

当您在浏览器中打开 index.html 文件时，div 元素内将显示当前的日期，例如 Sat 20 Jul 2025。

注意事项

DOM 操作方式：
- 本教程的关键在于使用 document.getElementById("elementId").innerHTML = value; 来操作 DOM。这是原生 J*aScript 获取元素并修改其内容的标准方法。
- 与此相对，jQuery 库提供了 $('.className').html(value); 或 $('#elementId').html(value); 等更简洁的语法。如果您的项目不引入 jQuery，则不能使用其提供的选择器和方法。
HTML id 属性： 确保 HTML 元素的 id 属性拼写正确，且与 J*aScript 代码中 document.getElementById() 方法的参数完全匹配。例如，id="first-date" 是正确的，而 id"first-date" 是错误的语法。
J*aScript 代码的放置位置：
- 为了确保 J*aScript 代码在尝试访问 HTML 元素时，该元素已经被浏览器解析并加载到 DOM 树中，通常建议将 <script> 标签放在 </script>

以上就是如何使用纯 J*aScript 在 HTML 元素中显示自定义格式的当前日期的详细内容，更多请关注其它相关文章！

# 为其 # 吴江seo引流 # 网站建设宣传方法 # 怎么在网上做关键词排名 # 苹果新媒体营销推广方案 # 湖州网站建设与制作 # seo专员培训 # 施耐德变频器seo # 网站建设广告发布 # 企业网站建设策划方面 # 营销科和推广科谁大些呢 # 四位 # 它将 # 选择器 # javascript # 这一 # 加载 # 您的 # 放在 # 自定义 # 如何使用 # 前端开发 # 浏览器 # 前端 # js # html # jquery # java