正文

如何用JavaScript轻松获取和显示当前月份及年份

/0 浏览量
0423

在JavaScript中，获取和显示当前月份及年份是一个非常简单的过程。通过使用内置的Date对象，你可以轻松地访问到当前日期的相关信息。以下是一个详细的指南，教你如何使用JavaScript获取和显示当前月份及年份。

获取当前月份

首先，我们需要创建一个新的Date对象。然后，可以通过访问Date对象的getMonth方法来获取当前月份。getMonth方法返回一个从0开始的月份索引，其中0代表一月，11代表十二月。

// 创建一个新的Date对象
const currentDate = new Date();

// 获取当前月份（0-11）
const currentMonth = currentDate.getMonth();

获取当前年份

同样，你可以使用getFullYear方法来获取当前年份。

// 获取当前年份
const currentYear = currentDate.getFullYear();

显示月份和年份

现在我们已经有了月份和年份的值，接下来就是如何将它们显示到页面上。你可以使用document.write、innerHTML或者textContent来在网页上显示这些信息。

使用document.write

document.write(`当前月份: ${currentMonth + 1}<br>当前年份: ${currentYear}`);

使用innerHTML

// 假设你有一个元素用于显示信息
const displayElement = document.getElementById('display');

// 设置元素的innerHTML
displayElement.innerHTML = `当前月份: ${currentMonth + 1}<br>当前年份: ${currentYear}`;

使用textContent

// 假设你有一个元素用于显示信息
const displayElement = document.getElementById('display');

// 设置元素的textContent
displayElement.textContent = `当前月份: ${currentMonth + 1}<br>当前年份: ${currentYear}`;

完整示例

以下是一个简单的HTML和JavaScript结合的示例，它创建了一个网页，并在其中显示当前月份和年份。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>显示当前月份和年份</title>
</head>
<body>
    <h1>当前月份和年份</h1>
    <p id="display"></p>

    <script>
        const currentDate = new Date();
        const currentMonth = currentDate.getMonth();
        const currentYear = currentDate.getFullYear();

        // 使用textContent来更新元素内容
        document.getElementById('display').textContent = `当前月份: ${currentMonth + 1}<br>当前年份: ${currentYear}`;
    </script>
</body>
</html>

在这个示例中，我们创建了一个HTML页面，其中包含一个用于显示信息的<p>元素。然后，在JavaScript部分，我们获取了当前月份和年份，并将它们设置为该元素的textContent。

这样，你就可以轻松地在网页上显示当前月份和年份了！

-- 展开阅读全文 --