html+css+js做了一个记事本，可复制源码
html
<!DOCTYPE html>
<html lang="zh"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>记事本</title> <link rel="stylesheet" href="styles.css">
</head> <body> <div class="notebook"> <div class="container"> <h1>记事本</h1> <button id="themeToggle">切换主题</button> <div class="side-buttons"> <button class="nav-button" id="exportNotes">导出事件</button> <button class="nav-button" id="printNotes">打印事件</button> </div> <div class="page"> <div class="input-section"> <h2>添加新事件</h2> <input type="date" id="dateInput" /> <input type="text" id="eventInput" placeholder="输入事件..." /> <div class="select-group"> <select id="categorySelect"> <option value="工作">工作</option> <option value="学习">学习</option> <option value="个人">个人</option> </select> <select id="prioritySelect"> <option value="高">高优先级</option> <option value="中">中优先级</option> <option value="低">低优先级</option> </select> </div> <button id="addButton">添加事件</button> </div> <div class="search-section"> <h2>我的记事</h2> <input type="text" id="searchInput" placeholder="搜索事件..." /> <ul id="notesList"></ul> </div> </div> </div> </div> <script src="script.js"></script>
</body> </html>
css
* { box-sizing: border-box; margin: 0; padding: 0;
} body { font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif; background: linear-gradient(135deg, #e3f2fd, #bbdefb); display: flex; justify-content: center; align-items: center; height: 100vh; color: #333; transition: background-color 0.4s;
} body.dark-theme { background: linear-gradient(135deg, #2b2c35, #34495e);
} .notebook { max-width: 800px; width: 90%; padding: 30px; background: #ffffff; box-shadow: 0 8px 30px rgba(0, 0, 0, 0.15); border-radius: 12px; position: relative;
} h1, h2 { text-align: center; margin-bottom: 20px; color: #3f51b5;
} button { padding: 12px 20px; border: none; background-color: #3f51b5; color: white; border-radius: 5px; font-size: 16px; cursor: pointer; transition: all 0.3s ease, transform 0.2s ease;
} button:hover { background-color: #5c6bc0; transform: translateY(-2px);
} .side-buttons { position: absolute; top: 30px; right: 30px; display: flex; flex-direction: column; gap: 10px;
} .page { margin-top: 20px;
} .input-section,
.search-section { background-color: rgba(255, 255, 255, 0.9); padding: 20px; border-radius: 10px; margin-bottom: 20px; box-shadow: 0 2px 15px rgba(33, 37, 41, 0.1);
} .input-section h2,
.search-section h2 { margin-bottom: 15px; color: #3f51b5;
} input[type="date"],
input[type="text"],
select { width: 100%; padding: 10px; border-radius: 5px; border: 1px solid #ddd; margin-bottom: 15px; transition: border-color 0.3s ease;
} input:focus,
select:focus { border-color: #3f51b5; outline: none;
} .select-group { display: flex; justify-content: space-between;
} ul { list-style-type: none; padding: 0;
} li { background: #fff; margin-bottom: 10px; padding: 12px 15px; border-radius: 8px; border-left: 4px solid #3f51b5; transition: all 0.3s; box-shadow: 0 2px 10px rgba(0, 0, 0, 0.1); justify-content: space-between;
} li:hover { background: #f0f0f0;
} body.dark-theme .notebook { background-color: #34495e;
} body.dark-theme button { background-color: #5a8dee;
} body.dark-theme button:hover { background-color: #4a76cc;
} body.dark-theme input[type="date"],
body.dark-theme input[type="text"],
body.dark-theme select { background-color: #545a67; color: #ddd; border-color: #666;
} body.dark-theme h1,
body.dark-theme h2,
body.dark-theme li { color: #ddd;
}js
let currentPage = 1; // 初始化记事本
function loadNotes() { const notesList = JSON.parse(localStorage.getItem('notesList')) || []; const notesListPage1 = document.getElementById('notesList'); const notesListPage2 = document.getElementById('notesListPage2'); notesListPage1.innerHTML = ''; notesListPage2.innerHTML = ''; notesList.forEach((note, index) => { appendNoteToList(note, index, notesListPage1); appendNoteToList(note, index, notesListPage2); });
} // 追加事件到列表
function appendNoteToList(note, index, list) { const listItem = document.createElement('li'); listItem.textContent = `${note.date} (${note.category}, ${note.priority}): ${note.event}`; const editButton = document.createElement('button'); editButton.textContent = '编辑'; editButton.style.marginLeft = '10px'; editButton.onclick = () => editNote(index); listItem.appendChild(editButton); const deleteButton = document.createElement('button'); deleteButton.textContent = '删除'; deleteButton.style.marginLeft = '10px'; deleteButton.onclick = () => deleteNote(index); listItem.appendChild(deleteButton); list.appendChild(listItem);
} // 添加事件到列表
document.addEventListener('DOMContentLoaded', function () { // 加载记事 loadNotes(); // 添加事件按钮 document.getElementById('addButton').addEventListener('click', function () { const dateInput = document.getElementById('dateInput').value; const eventInput = document.getElementById('eventInput').value; const categoryInput = document.getElementById('categorySelect').value; const priorityInput = document.getElementById('prioritySelect').value; if (addNoteToList(dateInput, eventInput, categoryInput, priorityInput)) { document.getElementById('dateInput').value = ''; document.getElementById('eventInput').value = ''; } }); // 事件搜索功能 document.getElementById('searchInput').addEventListener('input', function () { const filter = this.value.toLowerCase(); const notesList = JSON.parse(localStorage.getItem('notesList')) || []; const filteredNotes = notesList.filter(note => note.event.toLowerCase().includes(filter)); displayNotes(filteredNotes); }); // 导出和打印按钮 document.getElementById('exportNotes').addEventListener('click', exportNotes); document.getElementById('printNotes').addEventListener('click', printNotes); // 切换主题 document.getElementById('themeToggle').addEventListener('click', function () { document.body.classList.toggle('dark-theme'); });
}); // 加载记事
function loadNotes() { const notesList = JSON.parse(localStorage.getItem('notesList')) || []; displayNotes(notesList);
} // 显示记事
function displayNotes(notesList) { const notesListElement = document.getElementById('notesList'); notesListElement.innerHTML = ''; notesList.forEach((note, index) => { const listItem = document.createElement('li'); listItem.style.display = 'flex'; // 使用 Flexbox 布局 listItem.style.justifyContent = 'space-between'; // 使内容两边对齐 listItem.innerHTML = `${note.date} (${note.category}, ${note.priority}): ${note.event}`; const buttonContainer = document.createElement('div'); // 创建一个容器来装按钮 buttonContainer.style.display = 'flex'; // 使用 Flexbox 布局 buttonContainer.style.gap = '10px'; // 按钮之间的间距 // 添加编辑按钮 const editButton = document.createElement('button'); editButton.textContent = '编辑'; editButton.onclick = () => editNote(index); buttonContainer.appendChild(editButton); // 添加删除按钮 const deleteButton = document.createElement('button'); deleteButton.textContent = '删除'; deleteButton.onclick = () => deleteNote(index); buttonContainer.appendChild(deleteButton); listItem.appendChild(buttonContainer); // 将按钮容器添加到列表项 notesListElement.appendChild(listItem); // 将列表项添加到列表 });
} // 添加事件
function addNoteToList(dateInput, eventInput, categoryInput, priorityInput) { if (dateInput && eventInput) { const note = { date: dateInput, event: eventInput, category: categoryInput, priority: priorityInput }; const notesList = JSON.parse(localStorage.getItem('notesList')) || []; notesList.push(note); localStorage.setItem('notesList', JSON.stringify(notesList)); displayNotes(notesList); return true; } else { alert('请填写日期和事件。'); return false; }
} // 编辑事件
function editNote(index) { const notesList = JSON.parse(localStorage.getItem('notesList')) || []; const note = notesList[index]; document.getElementById('dateInput').value = note.date; document.getElementById('eventInput').value = note.event; document.getElementById('categorySelect').value = note.category; document.getElementById('prioritySelect').value = note.priority; deleteNote(index);
} // 删除事件
function deleteNote(index) { const notesList = JSON.parse(localStorage.getItem('notesList')) || []; notesList.splice(index, 1); localStorage.setItem('notesList', JSON.stringify(notesList)); displayNotes(notesList);
} // 导出事件为文本文件
function exportNotes() { const notesList = JSON.parse(localStorage.getItem('notesList')) || []; const notesText = notesList.map(note => `${note.date} (${note.category}, ${note.priority}): ${note.event}`).join('\n'); const blob = new Blob([notesText], { type: 'text/plain' }); const link = document.createElement('a'); link.href = URL.createObjectURL(blob); link.download = 'notes.txt'; link.click();
} // 打印事件
function printNotes() { const notesList = JSON.parse(localStorage.getItem('notesList')) || []; const notesText = notesList.map(note => `${note.date} (${note.category}, ${note.priority}): ${note.event}`).join('\n'); const printWindow = window.open('', '', 'height=400,width=600'); printWindow.document.write('<pre>' + notesText + '</pre>'); printWindow.document.close(); printWindow.print();
}