打开 chat.deepseek.com

输入提示词： 制作一个记事日历工具，每个月自动更新当前的月份，每天可以添加当天的备注，点击后即标记为完成

结果：

    
    
    
    


    

        

            上个月
            

            下个月
        
        
        

            
日
            
一
            
二
            
三
            
四
            
五
            
六
        
        
        

    

    <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-- rendercalendarcurrentyear currentmonth document.getelementbyidnext-month.addeventlistenerclick 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.addtoday const daynumber='document.createElement('div');' daynumber.classname='day-number' daynumber.textcontent='day;' daycell.appendchilddaynumber const noteinput='document.createElement('input');' noteinput.classname='note-input' noteinput.placeholder='添加备注...' noteinput.dataset.date='`${year}-${month}-${day}`;' noteinput.addeventlistenerkeypress functione if e.key='== 'Enter'' this.value.trim const datekey='this.dataset.date;' if notesdatekey notesdatekey='[];' notesdatekey.push text: this.value.trim completed: false localstorage.setitemcalendarnotes json.stringifynotes renderdaynotesdaycell datekey this.value daycell.appendchildnoteinput const datekey='`${year}-${month}-${day}`;' renderdaynotesdaycell datekey daysgrid.appendchilddaycell function renderdaynotesdaycell datekey const notestoremove='dayCell.querySelectorAll('.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>

功能说明

1. 自动显示当前月份：日历会自动显示当前月份和年份
2. 导航功能：可以通过"上个月"和"下个月"按钮切换月份
3. 添加备注：每天都有一个输入框，输入内容后按回车键添加备注
4. 标记完成：点击备注可以标记为完成/未完成
5. 数据保存：所有备注会保存在浏览器的本地存储中，刷新页面不会丢失
6. 今日高亮：当前日期会有特殊背景色标记

使用方法

1. 将上述代码保存为HTML文件（如calendar.html）
2. 用浏览器打开该文件即可使用
3. 不需要服务器支持，纯前端实现

最终效果：