当前与上月日期动态显示JS实现方法

在文章实战开发的过程中，我们经常会遇到一些这样那样的问题，然后要卡好半天，等问题解决了才发现原来一些细节知识点还是没有掌握好。今天golang学习网就整理分享《动态显示当前与上月日期的JS方法》，聊聊，希望可以帮助到正在努力赚钱的你。

本教程演示如何使用JavaScript动态更新HTML页面中的当前和上个月份及年份信息。通过利用Date对象及其getMonth()和getFullYear()方法，结合对月份索引的映射处理，可以轻松实现无需手动修改的自动化日期显示。文章将提供详细的代码示例和注意事项，确保日期信息的准确呈现，特别是处理月份跨年情况。

在网页开发中，经常需要显示动态变化的日期信息，例如当前月份和年份，或者上一个周期的月份和年份。手动更新这些信息既耗时又容易出错。本教程将指导您如何利用JavaScript的Date对象，实现HTML页面中当前和上个月份及年份的自动化动态显示。

核心概念：JavaScript Date 对象

JavaScript的Date对象是处理日期和时间的核心工具。它提供了多种方法来获取和设置年、月、日、时、分、秒等信息。在本例中，我们将主要使用以下两个方法：

• getMonth()：返回一个表示月份的数字（0-11），其中0代表一月，11代表十二月。这是一个需要特别注意的零基索引。
• getFullYear()：返回一个表示年份的四位数字。

HTML 结构准备

首先，我们需要在HTML中设置占位符元素，以便JavaScript可以定位并更新它们。通常，我们会使用具有特定ID的或标签来承载这些动态内容。

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

这里，id="current-cycle"和id="previous-cycle"将作为JavaScript代码中获取这些元素的标识符。

JavaScript 实现逻辑

接下来，我们将编写JavaScript代码来获取当前日期，计算出当前和上个月份及年份，并将其格式化后显示在HTML页面上。

1. 获取元素与月份映射

首先，获取HTML中的占位符元素，并创建一个月份索引到月份名称的映射，以便将getMonth()返回的数字转换为可读的月份字符串。

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

// 月份索引到名称的映射（getMonth()是零基索引）
const monthsMap = {
    0: '一月', 1: '二月', 2: '三月', 3: '四月', 4: '五月', 5: '六月',
    6: '七月', 7: '八月', 8: '九月', 9: '十月', 10: '十一月', 11: '十二月',
};

2. 获取当前日期信息

创建一个Date对象实例来获取当前的日期和时间。

const currentDate = new Date();
const currentMonthIndex = currentDate.getMonth(); // 获取当前月份（0-11）
const currentYear = currentDate.getFullYear();   // 获取当前年份

3. 格式化函数

为了代码的整洁和复用性，我们可以创建一个辅助函数来根据月份索引和年份生成格式化的文本。

// 根据月份索引和年份返回格式化的文本
const formatCycleText = (monthIndex, year) => monthsMap[monthIndex] + ' ' + year;

4. 显示当前周期

使用formatCycleText函数和获取到的当前月份、年份来更新“当前周期”的显示。

currentCycleElement.textContent = formatCycleText(currentMonthIndex, currentYear);

5. 计算并显示上个周期（关键步骤）

计算上个周期时，需要特别注意月份为一月（索引为0）的情况，因为这涉及到年份的切换。

let previousMonthIndex;
let previousYear;

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

previousCycleElement.textContent = formatCycleText(previousMonthIndex, previousYear);

这个逻辑确保了即使当前是1月，也能正确显示上一年12月的信息。

完整 JavaScript 代码示例

将以上所有步骤整合到一起，形成完整的JavaScript代码。

// 获取HTML元素
const currentCycleElement = document.getElementById('current-cycle');
const previousCycleElement = document.getElementById('previous-cycle');

// 月份索引到名称的映射（getMonth()是零基索引）
const monthsMap = {
    0: '一月', 1: '二月', 2: '三月', 3: '四月', 4: '五月', 5: '六月',
    6: '七月', 7: '八月', 8: '九月', 9: '十月', 10: '十一月', 11: '十二月',
};

// 获取当前日期信息
const currentDate = new Date();
const currentMonthIndex = currentDate.getMonth(); // 获取当前月份（0-11）
const currentYear = currentDate.getFullYear();   // 获取当前年份

// 根据月份索引和年份返回格式化的文本
const formatCycleText = (monthIndex, year) => monthsMap[monthIndex] + ' ' + year;

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

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

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

previousCycleElement.textContent = formatCycleText(previousMonthIndex, previousYear);

将这段JavaScript代码放置在HTML文件的