动态HTML日期显示：JavaScript实现当前与上个周期-html教程-PHP中文网

动态HTML日期显示：JavaScript实现当前与上个周期

聖光之護

发布： 2025-10-30 11:48:32

原创

635人浏览过

动态HTML日期显示：JavaScript实现当前与上个周期

本教程详细介绍了如何使用javascript动态地在html页面上显示当前月份、年份以及上一个月份和年份。通过利用`date`对象及其`getmonth()`和`getfullyear()`方法，并结合dom操作，我们将构建一个健壮的解决方案，包括处理月份索引、映射到月份名称以及妥善处理跨年计算上个月的场景，从而实现自动更新的日期显示，避免手动修改html。

需求背景

在网页开发中，经常需要展示一些动态更新的信息，例如“当前周期”或“上个周期”的月份和年份。如果这些信息是静态地写入HTML，每次更新都需要手动修改，效率低下且容易出错。本文将指导您如何使用JavaScript实现这一功能，使日期信息自动从浏览器获取并显示，无需手动干预。

核心概念：JavaScript Date 对象

JavaScript的Date对象是处理日期和时间的核心。它提供了多种方法来获取和设置年、月、日、小时、分钟、秒等信息。

我们主要会用到以下两个方法：

getMonth(): 返回日期的月份（0-11）。注意： 这是一个基于0的索引，其中0代表一月，11代表十二月。
getFullYear(): 返回日期的年份（四位数字）。

HTML 结构准备

首先，我们需要在HTML中创建用于显示动态日期的占位符。通常，我们会使用具有唯一id属性的元素，以便JavaScript能够轻松地找到并更新它们。

立即学习“Java免费学习笔记（深入）”；

<p>当前周期: <b id="current-cycle"></b></p>
<p>上个周期: <b id="previous-cycle"></b></p>

登录后复制

在这里，我们使用了<b>标签来强调日期信息，并分别赋予了current-cycle和previous-cycle的ID。

JavaScript 实现逻辑

接下来，我们将编写JavaScript代码来获取日期信息并更新HTML。

1. 获取DOM元素和月份映射

首先，获取我们之前定义的HTML元素，并创建一个月份索引到月份名称的映射，以方便显示。

AI帮个忙

多功能AI小工具，帮你快速生成周报、日报、邮、简历等

查看详情

const currentCycleElement = document.getElementById('current-cycle');
const previousCycleElement = document.getElementById('previous-cycle');

// 月份索引到名称的映射。getMonth() 返回0-11，所以0是January
const monthsToStr = {
  0: 'January', 1: 'February', 2: 'March', 3: 'April', 4: 'May', 5: 'June',
  6: 'July', 7: 'August', 8: 'September', 9: 'October', 10: 'November', 11: 'December',
};

登录后复制

2. 获取当前日期信息

使用new Date()创建一个Date对象，然后提取当前的月份索引和年份。

const currentDate = new Date();
const currentMonthIndex = currentDate.getMonth(); // 0-based
const currentYear = currentDate.getFullYear();

登录后复制

3. 格式化日期文本的函数

为了保持代码的整洁和可重用性，我们可以创建一个函数来将月份索引和年份格式化为我们想要的字符串。

const formatText = (monthIndex, year) => monthsToStr[monthIndex] + ' ' + year;

登录后复制

4. 显示当前周期

现在，我们可以直接使用currentMonthIndex和currentYear来更新“当前周期”的文本。

currentCycleElement.textContent = formatText(currentMonthIndex, currentYear);

登录后复制

5. 计算并显示上个周期（关键点：跨年处理）

计算上个周期需要特别注意，特别是当当前月份是一月时。如果当前月份是一月（currentMonthIndex为0），那么上个月就是去年的十二月。

let previousMonthIndex;
let previousYear;

if (currentMonthIndex === 0) { // 如果当前月份是1月 (索引为0)
  previousMonthIndex = 11; // 上个月是12月 (索引为11)
  previousYear = currentYear - 1; // 年份减1
} else {
  previousMonthIndex = currentMonthIndex - 1; // 上个月的索引
  previousYear = currentYear; // 年份不变
}

previousCycleElement.textContent = formatText(previousMonthIndex, previousYear);

登录后复制

完整代码示例

将上述所有部分组合起来，您可以得到一个完整的解决方案。将以下JavaScript代码放在HTML文件的<script>标签中，或者链接到一个外部.js文件。

<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>动态HTML日期显示</title>
</head>
<body>

    <p>当前周期: <b id="current-cycle"></b></p>
    <p>上个周期: <b id="previous-cycle"></b></p>

    <script>
        const currentCycleElement = document.getElementById('current-cycle');
        const previousCycleElement = document.getElementById('previous-cycle');

        // 月份索引到名称的映射。getMonth() 返回0-11，所以0是January
        const monthsToStr = {
          0: 'January', 1: 'February', 2: 'March', 3: 'April', 4: 'May', 5: 'June',
          6: 'July', 7: 'August', 8: 'September', 9: 'October', 10: 'November', 11: 'December',
        };

        const currentDate = new Date();
        const currentMonthIndex = currentDate.getMonth(); // 0-based
        const currentYear = currentDate.getFullYear();

        // 函数：将月份索引和年份格式化为字符串
        const formatText = (monthIndex, year) => monthsToStr[monthIndex] + ' ' + year;

        // 显示当前周期
        currentCycleElement.textContent = formatText(currentMonthIndex, currentYear);

        // 计算并显示上个周期
        let previousMonthIndex;
        let previousYear;

        if (currentMonthIndex === 0) { // 如果当前月份是1月 (索引为0)
          previousMonthIndex = 11; // 上个月是12月 (索引为11)
          previousYear = currentYear - 1; // 年份减1
        } else {
          previousMonthIndex = currentMonthIndex - 1; // 上个月的索引
          previousYear = currentYear; // 年份不变
        }

        previousCycleElement.textContent = formatText(previousMonthIndex, previousYear);
    </script>

</body>
</html>

登录后复制