本教程将指导您如何利用 javascript 的 `date` 对象动态地在 html 页面中显示当前月份和年份，以及上一个月份和年份。我们将详细介绍如何获取日期信息、处理月份的零基索引，并通过代码示例实现这一功能，确保页面内容自动更新，无需手动修改。
前言
在现代网页开发中，动态内容展示是提升用户体验和减少手动维护工作量的关键。对于日期和时间这类信息，如果每次都需要手动更新 html 文本，无疑会耗费大量时间和精力。本教程旨在提供一个使用 javaScript 动态显示当前月份和年份，以及上一个月份和年份的解决方案，从而实现页面的自动化更新。
核心概念解析
要实现动态日期显示，我们需要借助 javascript 内置的 Date 对象及其相关方法。
-
Date 对象: Date 对象是 JavaScript 中处理日期和时间的核心。通过 new Date() 构造函数，我们可以创建一个表示当前日期和时间的新 Date 实例。
-
getMonth() 方法: 此方法返回一个表示月份的整数，范围是 0 到 11。需要特别注意的是，0 代表一月，1 代表二月，以此类推，11 代表十二月。 这是 Date 对象中一个常见的“陷阱”，在处理月份时必须考虑到这一点。
-
getFullYear() 方法: 此方法返回一个四位数的年份，例如 2023。它能够准确获取当前年份。
构建 HTML 结构
首先，我们需要在 HTML 页面中设置两个占位符元素，用于显示当前周期和上个周期。我们使用 <b> 标签来突出显示日期信息，并通过 id 属性方便 JavaScript 访问。
<p>当前周期: <b id="current-cycle"></b></p> <p>上个周期: <b id="previous-cycle"></b></p>
JavaScript 实现逻辑
接下来，我们将编写 JavaScript 代码来获取日期信息并将其插入到上述 HTML 元素中。
立即学习“Java免费学习笔记（深入）”；
1. 获取 dom 元素
通过 document.getElementById() 方法，获取到 HTML 中定义的两个 <b> 元素，以便后续操作它们的 textContent 属性。
const currentCycleElement = document.getElementById('current-cycle'); const previousCycleElement = document.getElementById('previous-cycle');
2. 定义月份映射
由于 getMonth() 返回的是 0 到 11 的索引，我们需要一个映射关系将其转换为用户友好的月份名称。这里我们使用一个对象来实现。
const monthsToStr = { 0: '一月', 1: '二月', 2: '三月', 3: '四月', 4: '五月', 5: '六月', 6: '七月', 7: '八月', 8: '九月', 9: '十月', 10: '十一月', 11: '十二月', };
3. 获取当前日期信息
创建 Date 实例并获取当前的月份索引和年份。
const currentDate = new Date(); let currentMonthIndex = currentDate.getMonth(); // 0-based let currentYear = currentDate.getFullYear();
4. 格式化文本函数
为了避免重复代码，我们定义一个辅助函数 formatText，它接收月份索引和年份作为参数，并返回格式化后的字符串。
const formatText = (monthIndex, year) => monthsToStr[monthIndex] + ' ' + year;
5. 显示当前周期
直接调用 formatText 函数，并将结果赋值给 currentCycleElement 的 textContent。
currentCycleElement.textContent = formatText(currentMonthIndex, currentYear);
6. 计算并显示上个周期
计算上个月份需要特殊处理，尤其是当当前月份是一月（currentMonthIndex 为 0）时。此时，上个月份应该是去年的十二月。
let previousMonthIndex; let previousYear; if (currentMonthIndex === 0) { // 如果当前是一月，上个月是去年的十二月 previousMonthIndex = 11; // 十二月 previousYear = currentYear - 1; } else { previousMonthIndex = currentMonthIndex - 1; previousYear = currentYear; } previousCycleElement.textContent = formatText(previousMonthIndex, previousYear);
完整代码示例
将上述 HTML 和 JavaScript 代码结合起来，形成一个完整的可运行示例。
<!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> <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代表一月 const monthsToStr = { 0: '一月', 1: '二月', 2: '三月', 3: '四月', 4: '五月', 5: '六月', 6: '七月', 7: '八月', 8: '九月', 9: '十月', 10: '十一月', 11: '十二月', }; const currentDate = new Date(); let currentMonthIndex = currentDate.getMonth(); // 0-based let currentYear = currentDate.getFullYear(); // 格式化文本函数 const formatText = (monthIndex, year) => monthsToStr[monthIndex] + ' ' + year; // 显示当前周期 currentCycleElement.textContent = formatText(currentMonthIndex, currentYear); // 计算并显示上个周期 let previousMonthIndex; let previousYear; if (currentMonthIndex === 0) { // 如果当前是一月，上个月是去年的十二月 previousMonthIndex = 11; // 十二月 previousYear = currentYear - 1; } else { previousMonthIndex = currentMonthIndex - 1; previousYear = currentYear; } previousCycleElement.textContent = formatText(previousMonthIndex, previousYear); </script> </body> </html>
注意事项
- 月份的零基索引: 再次强调 Date.prototype.getMonth() 返回的月份是从 0 开始计数的，务必在处理时进行转换。
- 跨年处理: 在计算上个月份时，如果当前月份是一月，需要将年份也相应地减去一年，并将月份设置为十二月。示例代码已包含此逻辑。
- 时区影响: Date 对象默认使用客户端本地时区。如果您的应用程序需要处理特定时区的日期，可能需要使用 Intl.DateTimeFormat API 或第三方日期库（如 Moment.js 或 date-fns）。
- 浏览器兼容性: Date 对象是 JavaScript 的标准内置对象，在所有现代浏览器中都得到良好支持。
总结
通过本教程，您学会了如何利用 JavaScript 的 Date 对象及其 getMonth() 和 getFullYear() 方法，动态地在 HTML 页面中显示当前月份和年份以及上一个月份和年份。掌握这种动态更新内容的技术，可以大大提高网页的自动化程度和维护效率。理解 getMonth() 的零基索引特性和处理跨年逻辑是实现此功能的关键。