极客教程JavaScript 如何获取上周的日期
在本文中，我们将学习如何通过使用JavaScript获取上周的日期。JavaScript的动态性通过添加动态元素改进了网站。获取上周的日期对于事件日程、日历和及时数据显示至关重要。
有几种方法可以使用JavaScript获取上周的日期，如下所示：
- 利用日期对象
- 使用setUTCDate方法
我们将探讨上述所有方法，以及它们的基本实现和示例。
方法1：使用日期对象
JavaScript的日期对象提供了许多简化日期操作的方法。要获取上周的日期，可以从当前日期减去7天的毫秒数，并优雅地在屏幕上显示。
语法：
const lastWeekDate = new Date(currentDate.getTime() - 7 * 24 * 60 * 60 * 1000);
示例： 提供的HTML代码负责创建一个网页，突出展示文本“Geeksforgeeks”作为其主标题。为了确保有组织的布局和居中内容，采用了CSS样式技术，同时配以背景颜色。还包括一个视觉上吸引人的框，用来突出显示“上周的日期”，该日期是使用JavaScript动态计算并在该指定空间内显示。
HTML
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width,
initial-scale=1.0">
<title>Last Week's Date</title>
<style>
body {
font-family: Arial, sans-serif;
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
height: 100vh;
margin: 0;
background-color: #f0f0f0;
}
#dateContainer {
background-color: #ffffff;
border-radius: 8px;
padding: 16px;
box-shadow: 0px 2px 6px rgba(0, 0, 0, 0.1);
width: 300px;
height: 150px;
text-align: center;
}
.heading {
color: green;
font-size: 26px;
border-bottom: 3px solid green;
border-radius: 15px;
padding: 10px;
text-align: center;
}
.subheading {
font-size: 20px;
}
</style>
</head>
<body>
<div id="dateContainer">
<h1 class="heading">
Geeksforgeeks
</h1>
<h2 class="subheading">
Last Week's Date:
</h2>
<p id="lastWeekDate"></p>
</div>
<script>
// Get last week's date using Date object
const currentDate = new Date();
const lastWeekDate = new Date(currentDate.getTime()
- 7 * 24 * 60 * 60 * 1000);
// Display last week's date on the screen
const lastWeekDateElement =
document.getElementById("lastWeekDate");
lastWeekDateElement.textContent =
lastWeekDate.toDateString();
</script>
</body>
</html>
输出：
方法2：使用setUTCDate方法
在这种方法中，我们将使用setUTCDate方法来计算上周的日期，通过直接从当前日期减去7天来实现。随后，它将结果格式化为“ YYYY-MM-DD ”。JavaScript的Date对象被有效地用于操作日期并提供了获取上周日期的替代方法。
语法：
currentDate.setUTCDate(currentDate.getUTCDate() - 7);
示例： 此HTML代码用于创建一个名为“上周日期”的网页。通过使用CSS，布局整齐地居中显示内容，并具有绿色主题设计。网页展示了标题“Geeksforgeeks”，接着是“上周的日期：”以及一周前的日期。所有这些都被呈现在一个带有微妙阴影效果的容器中。
HTML
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content=
"width=device-width, initial-scale=1.0">
<title>Last Week's Date</title>
<style>
body {
font-family: Arial, sans-serif;
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
height: 100vh;
margin: 0;
background-color: #f0f0f0;
}
#dateContainer {
background-color: #ffffff;
border-radius: 8px;
padding: 16px;
box-shadow: 0px 2px 6px rgba(0, 0, 0, 0.1);
width: 300px;
height: 150px;
text-align: center;
}
.heading {
color: green;
font-size: 26px;
border-bottom: 3px solid green;
border-radius: 15px;
padding: 10px;
text-align: center;
}
.subheading {
font-size: 20px;
}
</style>
</head>
<body>
<div id="dateContainer">
<h1 class="heading">
Geeksforgeeks
</h1>
<h2 class="subheading">
Last Week's Date:
</h2>
<p id="lastWeekDate"></p>
</div>
<script>
// Get last week's date using JavaScript
const currentDate = new Date();
currentDate.setUTCDate(currentDate.getUTCDate() - 7);
// Format the date as "YYYY-MM-DD"
const formattedDate =
`{currentDate.getUTCFullYear()} -
{(currentDate.getUTCMonth() + 1)
.toString().padStart(2, '0')
} - ${currentDate.getUTCDate()
.toString().padStart(2, '0')}`;
// Display last week's date on the screen
const lastWeekDateElement =
document.getElementById("lastWeekDate");
lastWeekDateElement.textContent = formattedDate;
</script>
</body>
</html>
输出：
