【日历系统】

document.addEventListener(‘DOMContentLoaded’, function() {
const currentDateElement = document.getElementById(‘current-date’);
const dayOfYearElement = document.getElementById(‘day-of-year’);
const leapYearElement = document.getElementById(‘leap-year’);
const calendarElement = document.getElementById(‘calendar’);
const prevMonthButton = document.getElementById(‘prev-month’);
const nextMonthButton = document.getElementById(‘next-month’);
const yearSelect = document.getElementById(‘year-select’);
const themeToggle = document.getElementById(‘theme-toggle’);
const modal = document.getElementById(‘event-modal’);
const closeModal = document.getElementById(‘close-modal’);
const addEventButton = document.getElementById(‘add-event’);
const eventTitleInput = document.getElementById(‘event-title’);

let currentDate = new Date();
let events = {};function updateCalendar() {const year = currentDate.getFullYear();const month = currentDate.getMonth();const today = new Date().getDate();currentDateElement.textContent = currentDate.toLocaleDateString('zh-CN', { year: 'numeric', month: 'long' });const startOfYear = new Date(year, 0, 0);const diff = new Date(year, month, today) - startOfYear;const oneDay = 1000 * 60 * 60 * 24;const dayOfYear = Math.floor(diff / oneDay);dayOfYearElement.textContent = `今年的第 ${dayOfYear} 天`;const isLeapYear = (year % 4 === 0 && year % 100 !== 0) || (year % 400 === 0);leapYearElement.textContent = isLeapYear ? '闰年' : '平年';calendarElement.innerHTML = '';const firstDay = new Date(year, month, 1).getDay();const daysInMonth = new Date(year, month + 1, 0).getDate();for (let i = 0; i < firstDay; i++) {const dayElement = document.createElement('div');dayElement.classList.add('calendar-day', 'other-month');calendarElement.appendChild(dayElement);}for (let i = 1; i <= daysInMonth; i++) {const dayElement = document.createElement('div');dayElement.classList.add('calendar-day');dayElement.textContent = i;if (i === today && month === new Date().getMonth() && year === new Date().getFullYear()) {dayElement.classList.add('today');}const dateString = `${year}-${month+1}-${i}`;if (events[dateString]) {dayElement.classList.add('has-event');}dayElement.addEventListener('click', () => showModal(dateString));calendarElement.appendChild(dayElement);}
}function showModal(date) {modal.style.display = 'block';addEventButton.onclick = function() {const title = eventTitleInput.value;if (title) {if (!events[date]) {events[date] = [];}events[date].push(title);updateCalendar();modal.style.display = 'none';eventTitleInput.value = '';}};
}closeModal.onclick = function() {modal.style.display = 'none';
}window.onclick = function(event) {if (event.target == modal) {modal.style.display = 'none';}
}prevMonthButton.addEventListener('click', () => {currentDate.setMonth(currentDate.getMonth() - 1);updateCalendar();
});nextMonthButton.addEventListener('click', () => {currentDate.setMonth(currentDate.getMonth() + 1);updateCalendar();
});for (let i = 1900; i <= 2100; i++) {const option = document.createElement('option');option.value = i;option.textContent = i;yearSelect.appendChild(option);
}yearSelect.value = currentDate.getFullYear();
yearSelect.addEventListener('change', (e) => {currentDate.setFullYear(parseInt(e.target.value));updateCalendar();
});themeToggle.addEventListener('click', () => {document.body.classList.toggle('dark-theme');
});updateCalendar();

});

:root {--bg-color: #f0f0f0;--container-bg: white;--text-color: #333;--highlight-color: #4CAF50;
}body {font-family: Arial, sans-serif;display: flex;justify-content: center;align-items: center;height: 100vh;margin: 0;background-color: var(--bg-color);color: var(--text-color);
}.calendar-container {background-color: var(--container-bg);border-radius: 10px;box-shadow: 0 0 10px rgba(0, 0, 0, 0.1);padding: 20px;max-width: 800px;width: 100%;
}.calendar-header {display: flex;justify-content: space-between;align-items: center;margin-bottom: 20px;
}.calendar-header h1 {margin: 0;
}.calendar-info {text-align: center;margin-bottom: 10px;
}.calendar-controls {display: flex;justify-content: space-between;margin-bottom: 10px;
}.weekdays {display: grid;grid-template-columns: repeat(7, 1fr);gap: 5px;margin-bottom: 10px;font-weight: bold;
}.weekdays div {text-align: center;padding: 5px 0;
}.calendar-grid {display: grid;grid-template-columns: repeat(7, 1fr);gap: 3px;  // 减小了格子之间的间隔
}.calendar-day {aspect-ratio: 1;display: flex;flex-direction: column;justify-content: center;align-items: center;background-color: #f9f9f9;border-radius: 3px;  // 减小了圆角font-weight: bold;cursor: pointer;transition: background-color 0.3s;font-size: 0.9em;  // 减小了字体大小padding: 5px;  // 减小了内边距
}.calendar-day:hover {background-color: #e0e0e0;
}.today {background-color: var(--highlight-color);color: white;
}.other-month {color: #ccc;
}.has-event::after {content: '•';color: var(--highlight-color);font-size: 1.5em;
}.modal {display: none;position: fixed;z-index: 1;left: 0;top: 0;width: 100%;height: 100%;background-color: rgba(0,0,0,0.4);
}.modal-content {background-color: var(--container-bg);margin: 15% auto;padding: 20px;border: 1px solid #888;width: 80%;max-width: 500px;border-radius: 5px;
}button, select {padding: 5px 10px;border: none;border-radius: 3px;background-color: var(--highlight-color);color: white;cursor: pointer;
}input {padding: 5px;margin: 5px 0;width: 100%;box-sizing: border-box;
}.dark-theme {--bg-color: #333;--container-bg: #444;--text-color: #f0f0f0;--highlight-color: #66bb6a;
}