用js实现简单的记事本
一、设计分析：
记事本包括添加笔记、删除笔记、编辑笔记以及通过关键字查找笔记的功能。因此，一个简单的记事本界面，就要包括一个文本输入区域、添加笔记按钮、保存编辑后的笔记按钮和展示笔记的区域。
二、js代码部分分析：
-
使用
document.addEventListener("DOMContentLoaded", ...)确保在页面加载完成后才运行JavaScript代码。 -
获取页面上的各个元素，如文本输入框、添加按钮和笔记列表。
-
通过为添加按钮添加点击事件监听器来处理添加笔记的逻辑：
- 获取文本输入框中的内容。
- 如果内容不为空，创建一个新的
<li>元素，用于显示笔记内容，同时包含删除和编辑按钮，用于后续操作所生成的笔记。 - 清空文本输入框，以准备添加下一个笔记。
- 为每个笔记的删除按钮添加点击事件监听器，以允许用户删除笔记。
- 为每个笔记的编辑按钮添加点击事件监听器，以启用编辑笔记的功能。
-
通过为编辑按钮添加点击事件监听器来处理编辑笔记的逻辑：
- 当用户点击编辑按钮时，创建一个可编辑的文本区域 (
editTextarea) 并将其插入到笔记项中。 - 创建一个保存按钮 (
saveButton) 并将其添加到笔记项中，以便用户可以点击保存按钮来保存编辑后的内容。
- 当用户点击编辑按钮时，创建一个可编辑的文本区域 (
-
通过为保存按钮添加点击事件监听器来保存编辑后的笔记的逻辑：
- 当用户完成编辑笔记后，点击保存按钮时，编辑后的内容会保存到笔记项中，并保存按钮会变回编辑按钮。
- 如果编辑后的内容为空，笔记项将被删除。
-
通过为查找按钮添加点击事件监听器来查询笔记的逻辑：
- 当用户输入关键字并点击查找按钮时，它会遍历笔记列表中的每个笔记。
- 将不匹配的笔记项隐藏起来，即设置display属性为none，只显示匹配的笔记项。这样，用户就可以通过关键字查找笔记。
-
通过为取消查找按钮添加点击事件监听器来展示全部笔记的逻辑：
- 将所有笔记的display属性改为block，这样就展示了全部的笔记。
三、部分代码：
<div id="notes">
<textarea id="note-content" placeholder="输入你的笔记"></textarea>
<button id="add-note">添加笔记</button>
<ul id="note-list"></ul>
<div id="notes">
<input type="text" id="search-input" placeholder="查找笔记">
<button id="search-button">查找</button>
<button id="noSearch-button">取消查找</button>
<!-- 其他已存在的元素，如文本输入框和笔记列表 -->
</div>
</div>
<script>
document.addEventListener("DOMContentLoaded", function () {
const noteContent = document.getElementById("note-content");
const addNoteButton = document.getElementById("add-note");
const noteList = document.getElementById("note-list");
// 添加笔记
addNoteButton.addEventListener("click", function () {
const content = noteContent.value.trim();
if (content !== "") {
const li = document.createElement("li");
li.innerHTML = content + ' <button class="delete">删除</button> <button class="edit">编辑</button>';
noteList.appendChild(li);
noteContent.value = "";
// 删除笔记
const deleteButton = li.querySelector(".delete");
deleteButton.addEventListener("click", function () {
noteList.removeChild(li);
});
// 编辑笔记
const editButton = li.querySelector(".edit");
editButton.addEventListener("click", function () {
const editTextarea = document.createElement("textarea");
editTextarea.value = content;
editTextarea.classList.add("edit-textarea");
li.insertBefore(editTextarea, editButton);
li.removeChild(deleteButton);
li.removeChild(editButton);
// console.log(content);
// 创建保存按钮
const saveButton = document.createElement("button");
saveButton.textContent = "保存";
saveButton.classList.add("save");
li.appendChild(saveButton);
saveButton.addEventListener("click", function () {
var content1 = editTextarea.value;
if (content1 !== "") {
li.innerHTML = content1 + ' <button class="delete">删除</button> <button class="edit">编辑</button>';
} else {
noteList.removeChild(li);
}
});
});
}
});
// 获取查找笔记相关的元素
const searchInput = document.getElementById("search-input");
const searchButton = document.getElementById("search-button");
const noSearchButton = document.getElementById("noSearch-button");
// 查找笔记功能
searchButton.addEventListener("click", function () {
const searchTerm = searchInput.value.trim().toLowerCase();
if (searchTerm === "") {
alert("请输入查找关键字");
return;
}
const notes = document.querySelectorAll("#note-list li");
notes.forEach(function (note) {
const noteText = note.textContent.toLowerCase();
if (noteText.includes(searchTerm)) {
note.style.display = "block"; // 符合条件的笔记显示
} else {
note.style.display = "none"; // 不符合条件的笔记隐藏
}
});
});
noSearchButton.addEventListener("click", function () {
const searchInput = document.getElementById("search-input");
searchInput.value ="";
const notes = document.querySelectorAll("#note-list li");
notes.forEach(function (note) {
note.style.display = "block"; // 符合条件的笔记显示
});
});
});
</script>
</body>
body {
font-family: Arial, sans-serif;
background-color: #f0f0f0;
margin: 0;
padding: 0;
display: flex;
justify-content: center;
align-items: center;
height: 100vh;
}
#notes {
background-color: white;
border-radius: 8px;
box-shadow: 0 0 10px rgba(0, 0, 0, 0.2);
padding: 20px;
width: 300px;
text-align: center;
}
#note-content {
width: 100%;
padding: 10px;
border: 1px solid #ccc;
border-radius: 4px;
margin-bottom: 10px;
}
button {
border: none;
border-radius: 4px;
padding: 8px 16px;
cursor: pointer;
}
#add-note {
background-color: #008CBA;
color: white;
}
.delete,
.edit,
.save {
background-color: #f44336;
color: white;
margin-left: 5px;
}
/* 样式用于查找区域 */
#search-input {
padding: 5px;
margin-right: 5px;
}
#search-button,#noSerch-button {
background-color: #008CBA;
color: white;
border: none;
border-radius: 4px;
padding: 5px 10px;
cursor: pointer;
}
/* 样式用于匹配的笔记项 */
#note-list li {
display: block;
margin-bottom: 10px;
}
