打开 chat.deepseek.com
输入提示词： 制作一个记事日历工具，每个月自动更新当前的月份，每天可以添加当天的备注，点击后即标记为完成
结果：
<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>简易记事日历</title>
<style>
body {
font-family: 'Arial', sans-serif;
max-width: 800px;
margin: 0 auto;
padding: 20px;
background-color: #f5f5f5;
}
.calendar-container {
background-color: white;
border-radius: 10px;
box-shadow: 0 0 10px rgba(0,0,0,0.1);
padding: 20px;
}
.calendar-header {
display: flex;
justify-content: space-between;
align-items: center;
margin-bottom: 20px;
}
.month-year {
font-size: 24px;
font-weight: bold;
}
.days-header {
display: grid;
grid-template-columns: repeat(7, 1fr);
text-align: center;
font-weight: bold;
margin-bottom: 10px;
}
.days-grid {
display: grid;
grid-template-columns: repeat(7, 1fr);
gap: 10px;
}
.day-cell {
min-height: 80px;
border: 1px solid #ddd;
border-radius: 5px;
padding: 5px;
position: relative;
background-color: white;
}
.day-cell.empty {
background-color: #f9f9f9;
border: none;
}
.day-number {
font-weight: bold;
margin-bottom: 5px;
}
.day-cell.today {
background-color: #e6f7ff;
border-color: #91d5ff;
}
.note-input {
width: 100%;
font-size: 12px;
border: 1px solid #eee;
border-radius: 3px;
padding: 3px;
margin-top: 5px;
}
.note {
font-size: 12px;
background-color: #f0f0f0;
border-radius: 3px;
padding: 3px;
margin-top: 3px;
word-break: break-word;
cursor: pointer;
}
.note.completed {
text-decoration: line-through;
color: #888;
background-color: #e8f5e9;
}
.nav-button {
background-color: #4CAF50;
color: white;
border: none;
padding: 8px 15px;
border-radius: 5px;
cursor: pointer;
}
.nav-button:hover {
background-color: #45a049;
}
</style>
</head>
<body>
<div class="calendar-container">
<div class="calendar-header">
<button class="nav-button" id="prev-month">上个月</button>
<div class="month-year" id="month-year"></div>
<button class="nav-button" id="next-month">下个月</button>
</div>
<div class="days-header">
<div>日</div>
<div>一</div>
<div>二</div>
<div>三</div>
<div>四</div>
<div>五</div>
<div>六</div>
</div>
<div class="days-grid" id="days-grid"></div>
</div>
<script>
document.addEventListener('DOMContentLoaded', function() {
let currentDate = new Date();
let currentYear = currentDate.getFullYear();
let currentMonth = currentDate.getMonth();
// 从本地存储加载笔记
let notes = JSON.parse(localStorage.getItem('calendarNotes')) || {};
// 初始化日历
renderCalendar(currentYear, currentMonth);
// 上个月按钮事件
document.getElementById('prev-month').addEventListener('click', function() {
currentMonth--;
if (currentMonth < 0) {
currentMonth = 11;
currentYear--;
}
renderCalendar(currentYear, currentMonth);
});
// 下个月按钮事件
document.getElementById('next-month').addEventListener('click', function() {
currentMonth++;
if (currentMonth > 11) {
currentMonth = 0;
currentYear++;
}
renderCalendar(currentYear, currentMonth);
});
// 渲染日历
function renderCalendar(year, month) {
const monthNames = ["一月", "二月", "三月", "四月", "五月", "六月", "七月", "八月", "九月", "十月", "十一月", "十二月"];
document.getElementById('month-year').textContent = `${year}年 ${monthNames[month]}`;
const firstDay = new Date(year, month, 1);
const startingDay = firstDay.getDay();
const daysInMonth = new Date(year, month + 1, 0).getDate();
const today = new Date();
let daysGrid = document.getElementById('days-grid');
daysGrid.innerHTML = '';
// 添加空白单元格
for (let i = 0; i < startingDay; i++) {
const emptyCell = document.createElement('div');
emptyCell.className = 'day-cell empty';
daysGrid.appendChild(emptyCell);
}
// 添加日期单元格
for (let day = 1; day <= daysInMonth; day++) {
const dayCell = document.createElement('div');
dayCell.className = 'day-cell';
// 如果是今天，添加特殊样式
if (year === today.getFullYear() && month === today.getMonth() && day === today.getDate()) {
dayCell.classList.add('today');
}
const dayNumber = document.createElement('div');
dayNumber.className = 'day-number';
dayNumber.textContent = day;
dayCell.appendChild(dayNumber);
// 添加笔记输入框
const noteInput = document.createElement('input');
noteInput.className = 'note-input';
noteInput.placeholder = '添加备注...';
noteInput.dataset.date = `${year}-${month}-${day}`;
noteInput.addEventListener('keypress', function(e) {
if (e.key === 'Enter' && this.value.trim() !== '') {
const dateKey = this.dataset.date;
if (!notes[dateKey]) {
notes[dateKey] = [];
}
notes[dateKey].push({
text: this.value.trim(),
completed: false
});
localStorage.setItem('calendarNotes', JSON.stringify(notes));
renderDayNotes(dayCell, dateKey);
this.value = '';
}
});
dayCell.appendChild(noteInput);
// 渲染已有的笔记
const dateKey = `${year}-${month}-${day}`;
renderDayNotes(dayCell, dateKey);
daysGrid.appendChild(dayCell);
}
}
// 渲染某天的笔记
function renderDayNotes(dayCell, dateKey) {
// 移除现有的笔记（除了输入框）
const notesToRemove = dayCell.querySelectorAll('.note');
notesToRemove.forEach(note => note.remove());
// 添加新的笔记
if (notes[dateKey]) {
notes[dateKey].forEach((note, index) => {
const noteElement = document.createElement('div');
noteElement.className = 'note';
if (note.completed) {
noteElement.classList.add('completed');
}
noteElement.textContent = note.text;
noteElement.dataset.date = dateKey;
noteElement.dataset.index = index;
noteElement.addEventListener('click', function() {
const dateKey = this.dataset.date;
const index = parseInt(this.dataset.index);
notes[dateKey][index].completed = !notes[dateKey][index].completed;
localStorage.setItem('calendarNotes', JSON.stringify(notes));
this.classList.toggle('completed');
});
// 在输入框之前插入笔记
dayCell.insertBefore(noteElement, dayCell.querySelector('.note-input'));
});
}
}
});
</script>
</body>
</html>功能说明
- 自动显示当前月份：日历会自动显示当前月份和年份
- 导航功能：可以通过"上个月"和"下个月"按钮切换月份
- 添加备注：每天都有一个输入框，输入内容后按回车键添加备注
- 标记完成：点击备注可以标记为完成/未完成
- 数据保存：所有备注会保存在浏览器的本地存储中，刷新页面不会丢失
- 今日高亮：当前日期会有特殊背景色标记
使用方法
- 将上述代码保存为HTML文件（如calendar.html）
- 用浏览器打开该文件即可使用
- 不需要服务器支持，纯前端实现
最终效果：