实验目的：1. 认识JavaScript按钮事件
2. 熟悉DOM对象的使用
3. 了解CSS浮动排列
实验要求：设计一款电子日历，要求实现显示当天所在月份的全部日
期，且当天日期以红色显示。用户可以通过点击按钮控件（上个月，下个月）切换月份。
代码展示：
<!DOCTYPE html>
<html>
<head>
<title>电子日历</title>
<style>
/* 样式设置 */
.calendar {
font-family: Arial, sans-serif;
text-align: center;
}
.calendar-header {
display: flex;
justify-content: space-between;
align-items: center;
background-color: #0074d9;
color: #fff;
padding: 10px;
}
.calendar-body {
display: grid;
grid-template-columns: repeat(7, 1fr);
gap: 2px;
padding: 10px;
}
.calendar-day {
padding: 10px;
border: 1px solid #ccc;
}
.today {
background-color: #ff4136;
color: #fff;
border: 1px solid #ff4136;
border-radius: 50%;
}
</style>
</head>
<body>
<div class="calendar">
<div class="calendar-header">
<button id="prevMonth">上个月</button>
<h2 id="currentMonthYear"></h2>
<button id="nextMonth">下个月</button>
</div>
<div class="calendar-body" id="calendarBody">
</div>
</div>
<script>
const calendarBody = document.getElementById("calendarBody");
const currentMonthYear = document.getElementById("currentMonthYear");
const prevMonthButton = document.getElementById("prevMonth");
const nextMonthButton = document.getElementById("nextMonth");
let currentDate = new Date();
// 初始化日历
function initCalendar(date) {
currentDate = date;
const firstDay = new Date(date.getFullYear(), date.getMonth(), 1);
const lastDay = new Date(date.getFullYear(), date.getMonth() + 1, 0);
currentMonthYear.textContent = `${date.toLocaleString('default', { month: 'long' })} ${date.getFullYear()}`;
calendarBody.innerHTML = '';
// 添加上个月的日期
for (let i = 0; i < firstDay.getDay(); i++) {
const day = document.createElement('div');
day.className = 'calendar-day';
day.textContent = '';
calendarBody.appendChild(day);
}
// 添加当月的日期
for (let i = 1; i <= lastDay.getDate(); i++) {
const day = document.createElement('div');
day.className = 'calendar-day';
day.textContent = i;
if (i === currentDate.getDate() && date.getMonth() === currentDate.getMonth()) {
day.classList.add('today');
}
calendarBody.appendChild(day);
}
}
// 切换到上个月
prevMonthButton.addEventListener('click', () => {
currentDate.setMonth(currentDate.getMonth() - 1);
initCalendar(currentDate);
});
// 切换到下个月
nextMonthButton.addEventListener('click', () => {
currentDate.setMonth(currentDate.getMonth() + 1);
initCalendar(currentDate);
});
// 初始化并显示当前月份
initCalendar(currentDate);
</script>
</body>
</html>
效果展示：
扫一扫
4017
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
