init commit.
This commit is contained in:
44
README.md
Normal file
44
README.md
Normal file
@@ -0,0 +1,44 @@
|
||||
# 任务日历系统
|
||||
|
||||
一个简洁美观的任务日历系统，可以标记每一天的任务完成状态。
|
||||
|
||||
## 功能特性
|
||||
|
||||
- 📅 **日历视图**：清晰的月份日历展示
|
||||
- ✅ **任务标记**：支持三种状态
|
||||
- ✓ 任务已完成（绿色）
|
||||
- ○ 任务部分未完成（橙色）
|
||||
- 未标记（灰色）
|
||||
- 💾 **数据保存**：使用浏览器 localStorage 自动保存标记数据
|
||||
- 🎨 **简洁界面**：现代化的 UI 设计，响应式布局
|
||||
- 🖱️ **便捷操作**：点击日期即可切换标记状态
|
||||
|
||||
## 使用方法
|
||||
|
||||
1. 直接在浏览器中打开 `index.html` 文件
|
||||
2. 点击日历上的日期来切换标记状态：
|
||||
- 第一次点击：标记为"已完成"（✓）
|
||||
- 第二次点击：标记为"部分完成"（○）
|
||||
- 第三次点击：清除标记
|
||||
3. 使用左右箭头按钮切换月份
|
||||
4. 点击"今天"按钮快速回到当前月份
|
||||
|
||||
## 文件结构
|
||||
|
||||
```
|
||||
timeline/
|
||||
├── index.html # 主页面
|
||||
├── style.css # 样式文件
|
||||
├── app.js # 应用逻辑
|
||||
└── README.md # 说明文档
|
||||
```
|
||||
|
||||
## 技术说明
|
||||
|
||||
- 纯 HTML/CSS/JavaScript 实现，无需构建工具
|
||||
- 使用 localStorage 保存数据，刷新页面后数据不会丢失
|
||||
- 响应式设计，支持移动端和桌面端
|
||||
|
||||
## 浏览器兼容性
|
||||
|
||||
支持所有现代浏览器（Chrome、Firefox、Safari、Edge 等）
|
||||
211
www/app.js
Normal file
211
www/app.js
Normal file
@@ -0,0 +1,211 @@
|
||||
// 日历状态管理
|
||||
class CalendarApp {
|
||||
constructor() {
|
||||
this.currentDate = new Date();
|
||||
this.markedDates = this.loadData();
|
||||
this.init();
|
||||
}
|
||||
|
||||
init() {
|
||||
this.renderCalendar();
|
||||
this.bindEvents();
|
||||
}
|
||||
|
||||
// 获取月份的第一天是星期几（0=周日, 1=周一...）
|
||||
getFirstDayOfMonth(date) {
|
||||
const firstDay = new Date(date.getFullYear(), date.getMonth(), 1);
|
||||
return firstDay.getDay();
|
||||
}
|
||||
|
||||
// 获取月份的天数
|
||||
getDaysInMonth(date) {
|
||||
return new Date(date.getFullYear(), date.getMonth() + 1, 0).getDate();
|
||||
}
|
||||
|
||||
// 格式化日期为 YYYY-MM-DD
|
||||
formatDate(date) {
|
||||
const year = date.getFullYear();
|
||||
const month = String(date.getMonth() + 1).padStart(2, '0');
|
||||
const day = String(date.getDate()).padStart(2, '0');
|
||||
return `${year}-${month}-${day}`;
|
||||
}
|
||||
|
||||
// 检查是否为今天
|
||||
isToday(date) {
|
||||
const today = new Date();
|
||||
return date.getDate() === today.getDate() &&
|
||||
date.getMonth() === today.getMonth() &&
|
||||
date.getFullYear() === today.getFullYear();
|
||||
}
|
||||
|
||||
// 获取日期标记状态
|
||||
getDateStatus(date) {
|
||||
const dateStr = this.formatDate(date);
|
||||
return this.markedDates[dateStr] || 'none';
|
||||
}
|
||||
|
||||
// 切换日期标记状态
|
||||
toggleDateStatus(date) {
|
||||
const dateStr = this.formatDate(date);
|
||||
const currentStatus = this.markedDates[dateStr] || 'none';
|
||||
|
||||
// 状态循环: none -> completed -> partial -> none
|
||||
let newStatus;
|
||||
switch (currentStatus) {
|
||||
case 'none':
|
||||
newStatus = 'completed';
|
||||
break;
|
||||
case 'completed':
|
||||
newStatus = 'partial';
|
||||
break;
|
||||
case 'partial':
|
||||
newStatus = 'none';
|
||||
break;
|
||||
default:
|
||||
newStatus = 'none';
|
||||
}
|
||||
|
||||
if (newStatus === 'none') {
|
||||
delete this.markedDates[dateStr];
|
||||
} else {
|
||||
this.markedDates[dateStr] = newStatus;
|
||||
}
|
||||
|
||||
this.saveData();
|
||||
this.renderCalendar();
|
||||
}
|
||||
|
||||
// 渲染日历
|
||||
renderCalendar() {
|
||||
const calendar = document.getElementById('calendar');
|
||||
calendar.innerHTML = '';
|
||||
|
||||
// 星期标题
|
||||
const weekdays = ['日', '一', '二', '三', '四', '五', '六'];
|
||||
weekdays.forEach(day => {
|
||||
const weekdayEl = document.createElement('div');
|
||||
weekdayEl.className = 'weekday';
|
||||
weekdayEl.textContent = day;
|
||||
calendar.appendChild(weekdayEl);
|
||||
});
|
||||
|
||||
// 更新月份显示
|
||||
const monthNames = ['一月', '二月', '三月', '四月', '五月', '六月',
|
||||
'七月', '八月', '九月', '十月', '十一月', '十二月'];
|
||||
const monthDisplay = document.getElementById('currentMonth');
|
||||
monthDisplay.textContent = `${this.currentDate.getFullYear()}年 ${monthNames[this.currentDate.getMonth()]}`;
|
||||
|
||||
// 获取月份信息
|
||||
const firstDay = this.getFirstDayOfMonth(this.currentDate);
|
||||
const daysInMonth = this.getDaysInMonth(this.currentDate);
|
||||
const today = new Date();
|
||||
|
||||
// 添加上个月的日期（填充空白）
|
||||
const prevMonth = new Date(this.currentDate.getFullYear(), this.currentDate.getMonth() - 1, 0);
|
||||
const daysInPrevMonth = prevMonth.getDate();
|
||||
|
||||
for (let i = firstDay - 1; i >= 0; i--) {
|
||||
const day = daysInPrevMonth - i;
|
||||
const date = new Date(this.currentDate.getFullYear(), this.currentDate.getMonth() - 1, day);
|
||||
this.createDayElement(calendar, date, day, true);
|
||||
}
|
||||
|
||||
// 添加当前月的日期
|
||||
for (let day = 1; day <= daysInMonth; day++) {
|
||||
const date = new Date(this.currentDate.getFullYear(), this.currentDate.getMonth(), day);
|
||||
this.createDayElement(calendar, date, day, false);
|
||||
}
|
||||
|
||||
// 添加下个月的日期（填充到完整周）
|
||||
const totalCells = calendar.children.length - 7; // 减去星期标题
|
||||
const remainingCells = 42 - totalCells; // 6行 x 7列 = 42
|
||||
for (let day = 1; day <= remainingCells; day++) {
|
||||
const date = new Date(this.currentDate.getFullYear(), this.currentDate.getMonth() + 1, day);
|
||||
this.createDayElement(calendar, date, day, true);
|
||||
}
|
||||
}
|
||||
|
||||
// 创建日期元素
|
||||
createDayElement(container, date, dayNumber, isOtherMonth) {
|
||||
const dayEl = document.createElement('div');
|
||||
dayEl.className = 'day';
|
||||
|
||||
if (isOtherMonth) {
|
||||
dayEl.classList.add('other-month');
|
||||
}
|
||||
|
||||
if (this.isToday(date)) {
|
||||
dayEl.classList.add('today');
|
||||
}
|
||||
|
||||
const status = this.getDateStatus(date);
|
||||
if (status !== 'none') {
|
||||
dayEl.classList.add(status);
|
||||
}
|
||||
|
||||
const dayNumberEl = document.createElement('div');
|
||||
dayNumberEl.className = 'day-number';
|
||||
dayNumberEl.textContent = dayNumber;
|
||||
dayEl.appendChild(dayNumberEl);
|
||||
|
||||
if (status !== 'none') {
|
||||
const markEl = document.createElement('div');
|
||||
markEl.className = 'day-mark';
|
||||
markEl.textContent = status === 'completed' ? '✓' : '○';
|
||||
dayEl.appendChild(markEl);
|
||||
}
|
||||
|
||||
// 添加点击事件
|
||||
dayEl.addEventListener('click', () => {
|
||||
if (!isOtherMonth) {
|
||||
this.toggleDateStatus(date);
|
||||
}
|
||||
});
|
||||
|
||||
container.appendChild(dayEl);
|
||||
}
|
||||
|
||||
// 绑定事件
|
||||
bindEvents() {
|
||||
document.getElementById('prevMonth').addEventListener('click', () => {
|
||||
this.currentDate.setMonth(this.currentDate.getMonth() - 1);
|
||||
this.renderCalendar();
|
||||
});
|
||||
|
||||
document.getElementById('nextMonth').addEventListener('click', () => {
|
||||
this.currentDate.setMonth(this.currentDate.getMonth() + 1);
|
||||
this.renderCalendar();
|
||||
});
|
||||
|
||||
document.getElementById('todayBtn').addEventListener('click', () => {
|
||||
this.currentDate = new Date();
|
||||
this.renderCalendar();
|
||||
});
|
||||
}
|
||||
|
||||
// 保存数据到 localStorage
|
||||
saveData() {
|
||||
try {
|
||||
localStorage.setItem('calendarMarkedDates', JSON.stringify(this.markedDates));
|
||||
} catch (e) {
|
||||
console.error('保存数据失败:', e);
|
||||
}
|
||||
}
|
||||
|
||||
// 从 localStorage 加载数据
|
||||
loadData() {
|
||||
try {
|
||||
const data = localStorage.getItem('calendarMarkedDates');
|
||||
return data ? JSON.parse(data) : {};
|
||||
} catch (e) {
|
||||
console.error('加载数据失败:', e);
|
||||
return {};
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
// 初始化应用
|
||||
document.addEventListener('DOMContentLoaded', () => {
|
||||
new CalendarApp();
|
||||
});
|
||||
|
||||
46
www/index.html
Normal file
46
www/index.html
Normal file
@@ -0,0 +1,46 @@
|
||||
<!DOCTYPE html>
|
||||
<html lang="zh-CN">
|
||||
<head>
|
||||
<meta charset="UTF-8">
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
||||
<title>任务日历系统</title>
|
||||
<link rel="stylesheet" href="style.css">
|
||||
</head>
|
||||
<body>
|
||||
<div class="container">
|
||||
<header>
|
||||
<h1>任务日历</h1>
|
||||
<div class="controls">
|
||||
<button id="prevMonth" class="btn-nav">‹</button>
|
||||
<span id="currentMonth" class="month-display"></span>
|
||||
<button id="nextMonth" class="btn-nav">›</button>
|
||||
<button id="todayBtn" class="btn-today">今天</button>
|
||||
</div>
|
||||
</header>
|
||||
|
||||
<div class="legend">
|
||||
<div class="legend-item">
|
||||
<span class="mark completed">✓</span>
|
||||
<span>任务已完成</span>
|
||||
</div>
|
||||
<div class="legend-item">
|
||||
<span class="mark partial">○</span>
|
||||
<span>部分未完成</span>
|
||||
</div>
|
||||
<div class="legend-item">
|
||||
<span class="mark none"></span>
|
||||
<span>未标记</span>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="calendar" id="calendar"></div>
|
||||
|
||||
<div class="instructions">
|
||||
<p>💡 点击日期可切换标记状态：未标记 → 已完成 → 部分完成 → 未标记</p>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<script src="app.js"></script>
|
||||
</body>
|
||||
</html>
|
||||
|
||||
266
www/style.css
Normal file
266
www/style.css
Normal file
@@ -0,0 +1,266 @@
|
||||
* {
|
||||
margin: 0;
|
||||
padding: 0;
|
||||
box-sizing: border-box;
|
||||
}
|
||||
|
||||
body {
|
||||
font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', 'Roboto', 'Oxygen', 'Ubuntu', 'Cantarell', 'Fira Sans', 'Droid Sans', 'Helvetica Neue', sans-serif;
|
||||
background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
|
||||
min-height: 100vh;
|
||||
padding: 20px;
|
||||
color: #333;
|
||||
}
|
||||
|
||||
.container {
|
||||
max-width: 900px;
|
||||
margin: 0 auto;
|
||||
background: white;
|
||||
border-radius: 16px;
|
||||
box-shadow: 0 20px 60px rgba(0, 0, 0, 0.3);
|
||||
padding: 30px;
|
||||
}
|
||||
|
||||
header {
|
||||
text-align: center;
|
||||
margin-bottom: 30px;
|
||||
}
|
||||
|
||||
header h1 {
|
||||
font-size: 2.5em;
|
||||
color: #667eea;
|
||||
margin-bottom: 20px;
|
||||
font-weight: 600;
|
||||
}
|
||||
|
||||
.controls {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
gap: 15px;
|
||||
flex-wrap: wrap;
|
||||
}
|
||||
|
||||
.btn-nav {
|
||||
background: #667eea;
|
||||
color: white;
|
||||
border: none;
|
||||
width: 40px;
|
||||
height: 40px;
|
||||
border-radius: 50%;
|
||||
font-size: 24px;
|
||||
cursor: pointer;
|
||||
transition: all 0.3s ease;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
}
|
||||
|
||||
.btn-nav:hover {
|
||||
background: #5568d3;
|
||||
transform: scale(1.1);
|
||||
}
|
||||
|
||||
.btn-nav:active {
|
||||
transform: scale(0.95);
|
||||
}
|
||||
|
||||
.month-display {
|
||||
font-size: 1.5em;
|
||||
font-weight: 600;
|
||||
color: #333;
|
||||
min-width: 200px;
|
||||
}
|
||||
|
||||
.btn-today {
|
||||
background: #764ba2;
|
||||
color: white;
|
||||
border: none;
|
||||
padding: 10px 20px;
|
||||
border-radius: 8px;
|
||||
font-size: 14px;
|
||||
cursor: pointer;
|
||||
transition: all 0.3s ease;
|
||||
}
|
||||
|
||||
.btn-today:hover {
|
||||
background: #653a8a;
|
||||
transform: translateY(-2px);
|
||||
box-shadow: 0 4px 12px rgba(118, 75, 162, 0.4);
|
||||
}
|
||||
|
||||
.legend {
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
gap: 30px;
|
||||
margin-bottom: 25px;
|
||||
padding: 15px;
|
||||
background: #f8f9fa;
|
||||
border-radius: 10px;
|
||||
flex-wrap: wrap;
|
||||
}
|
||||
|
||||
.legend-item {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 8px;
|
||||
font-size: 14px;
|
||||
}
|
||||
|
||||
.mark {
|
||||
width: 24px;
|
||||
height: 24px;
|
||||
border-radius: 50%;
|
||||
display: inline-flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
font-weight: bold;
|
||||
font-size: 16px;
|
||||
}
|
||||
|
||||
.mark.completed {
|
||||
background: #10b981;
|
||||
color: white;
|
||||
}
|
||||
|
||||
.mark.partial {
|
||||
background: #f59e0b;
|
||||
color: white;
|
||||
}
|
||||
|
||||
.mark.none {
|
||||
background: #e5e7eb;
|
||||
border: 2px solid #d1d5db;
|
||||
}
|
||||
|
||||
.calendar {
|
||||
display: grid;
|
||||
grid-template-columns: repeat(7, 1fr);
|
||||
gap: 8px;
|
||||
margin-bottom: 20px;
|
||||
}
|
||||
|
||||
.weekday {
|
||||
text-align: center;
|
||||
font-weight: 600;
|
||||
color: #667eea;
|
||||
padding: 12px;
|
||||
font-size: 14px;
|
||||
background: #f0f4ff;
|
||||
border-radius: 8px;
|
||||
}
|
||||
|
||||
.day {
|
||||
aspect-ratio: 1;
|
||||
border: 2px solid #e5e7eb;
|
||||
border-radius: 10px;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
cursor: pointer;
|
||||
transition: all 0.2s ease;
|
||||
background: white;
|
||||
position: relative;
|
||||
padding: 8px;
|
||||
}
|
||||
|
||||
.day:hover {
|
||||
border-color: #667eea;
|
||||
transform: translateY(-2px);
|
||||
box-shadow: 0 4px 12px rgba(102, 126, 234, 0.2);
|
||||
}
|
||||
|
||||
.day.other-month {
|
||||
opacity: 0.4;
|
||||
background: #f9fafb;
|
||||
}
|
||||
|
||||
.day.today {
|
||||
border-color: #667eea;
|
||||
background: #f0f4ff;
|
||||
font-weight: 600;
|
||||
}
|
||||
|
||||
.day.completed {
|
||||
background: #d1fae5;
|
||||
border-color: #10b981;
|
||||
}
|
||||
|
||||
.day.completed .day-number {
|
||||
color: #065f46;
|
||||
}
|
||||
|
||||
.day.partial {
|
||||
background: #fef3c7;
|
||||
border-color: #f59e0b;
|
||||
}
|
||||
|
||||
.day.partial .day-number {
|
||||
color: #92400e;
|
||||
}
|
||||
|
||||
.day-number {
|
||||
font-size: 16px;
|
||||
font-weight: 500;
|
||||
margin-bottom: 4px;
|
||||
}
|
||||
|
||||
.day-mark {
|
||||
font-size: 20px;
|
||||
font-weight: bold;
|
||||
line-height: 1;
|
||||
}
|
||||
|
||||
.day.completed .day-mark {
|
||||
color: #10b981;
|
||||
}
|
||||
|
||||
.day.partial .day-mark {
|
||||
color: #f59e0b;
|
||||
}
|
||||
|
||||
.instructions {
|
||||
text-align: center;
|
||||
padding: 15px;
|
||||
background: #f0f4ff;
|
||||
border-radius: 10px;
|
||||
color: #667eea;
|
||||
font-size: 14px;
|
||||
}
|
||||
|
||||
@media (max-width: 768px) {
|
||||
.container {
|
||||
padding: 20px;
|
||||
}
|
||||
|
||||
header h1 {
|
||||
font-size: 2em;
|
||||
}
|
||||
|
||||
.month-display {
|
||||
font-size: 1.2em;
|
||||
min-width: 150px;
|
||||
}
|
||||
|
||||
.calendar {
|
||||
gap: 4px;
|
||||
}
|
||||
|
||||
.day {
|
||||
padding: 4px;
|
||||
}
|
||||
|
||||
.day-number {
|
||||
font-size: 14px;
|
||||
}
|
||||
|
||||
.day-mark {
|
||||
font-size: 16px;
|
||||
}
|
||||
|
||||
.legend {
|
||||
gap: 15px;
|
||||
}
|
||||
}
|
||||
|
||||
Reference in New Issue
Block a user