做一个记笔记的js插件

创建一个简单的JavaScript记事本插件，通常涉及到以下几个步骤：

1. **HTML结构**：首先，你需要一个基础的HTML结构，包括输入框用于用户输入文本，按钮来保存或删除笔记，以及显示笔记的区域。

<div id="note-editor">
  <textarea id="note-input" placeholder="请输入笔记内容"></textarea>
  <button id="save-btn">保存</button>
  <ul id="notes-list"></ul>
</div>

2. **JavaScript逻辑**：使用JavaScript处理用户的交互和数据操作。例如，可以绑定事件监听器到`save-btn`，当点击时获取输入框的内容并添加到`notes-list`中。

const saveBtn = document.getElementById('save-btn');
const noteInput = document.getElementById('note-input');
const notesList = document.getElementById('notes-list');

saveBtn.addEventListener('click', function() {
  const newNote = noteInput.value;
  if (newNote) {
    addNoteToList(newNote);
    clearInput();
  }
});

function addNoteToList(note) {
  // 创建一个新的列表项，并添加到页面
  const li = document.createElement('li');
  li.textContent = note;
  notesList.appendChild(li);
}

function clearInput() {
  noteInput.value = '';
}

3. **CSS样式**：给元素添加适当的样式，使其看起来像一个记事本插件。

#note-editor {
  border: 1px solid #ccc;
  padding: 10px;
}

#note-input {
  width: 100%;
  height: 150px;
  margin-bottom: 10px;
}

#save-btn {
  background-color: #4CAF50;
  color: white;
  border: none;
  padding: 5px 10px;
}

#notes-list {
  list-style-type: none;
  padding: 0;
}

这个插件非常基础，实际应用中可能会增加更多的功能，如编辑、搜索等。如果你想让这个插件更复杂，可以考虑使用React、Vue等前端框架，或者利用localStorage来持久化存储笔记。