用deepseek开发一款记事日历（用deepseek搭建本地知识库）

zhezhongyun 2025-07-28 01:23 26 浏览

打开 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）
用浏览器打开该文件即可使用
不需要服务器支持，纯前端实现

最终效果：

text-decoration-line 属性

用deepseek开发一款记事日历（用deepseek搭建本地知识库）

功能说明

使用方法

相关推荐

b端详情页:各种信息聚集地，设计师要如何规划这一亩三分地呢

漏洞系列一一看我一招征服漏洞 SSRF

Web前端需要学什么?Web前端开发需要学习哪些?

接口测试遇到500报错?别慌，你的头部可能有点问题

前端Flex布局可视化布局工具介绍，vue和html5快速设计利器

「资讯」为强迫用户使用Edge浏览器，微软又出新招数

HTML 简介（html简介及优缺点）

HBuilderX，uni-app创建HTML5项目，同时支持浏览器和移动端

现在页面实时聊天都使用Websocket技术实现吗?

关于HTML5被简称做H5，你怎么看?（html5缩写）