33. 本地记事本

本地记事本

html部分

<button  class="add"><i class="iconfont icon-jiahao"></i>
</button>

css部分

*{margin: 0;padding: 0;
}
body{background-color: #7bdaf3;display: flex;padding-top: 3rem;flex-wrap: wrap;
}
.add{position: fixed;top: 1rem;right: 1rem;background-color: #9ec862;color: #fff;border: none;border-radius: 3px;padding: 0.5rem 1rem;cursor: pointer;
}
.add:active{transform: scale(0.98);
}
.note{background-color: #fff;box-shadow: 0 0 10px 4px rgba(0, 0, 0, 0.1);margin: 30px 20px;height: 400px;width: 400px;
}
.tools{background-color: #9ec862;display: flex;justify-content: flex-end;padding: .5rem;
}
.tools button{background-color: transparent;border: none;color: #fff;cursor: pointer;font-size: 1rem;margin-left: .5rem;
}
textarea{outline: none;font-size: 1.2rem;border: none;height: 400px;overflow-y: auto;overflow-x: hidden;padding: 10px;display: block;width: 95%;
}

js部分

const add = document.querySelector(".add")init_dom()
add.addEventListener("click", function () {const body = document.body;body.appendChild(create_note())
})// 初始化dom    
function init_dom() {const body = document.bodyfor (let i = 0; i < localStorage.length; i++) {const dom = localStorage.getItem(localStorage.key(i));if (dom) {const div = document.createElement("div");div.innerHTML = dom;const note = div.children[0];const edit = note.querySelector(".edit");const del = note.querySelector(".delete");const text = note.querySelector("textarea");text.innerHTML = text.getAttribute("value");body.appendChild(note); // Append the newly created note to the bodyevent_dom(edit);event_dom(del);event_dom(text, 1);}}
}// 添加记事本
function create_note() {const note = document.createElement("div")note.classList.add("note");note.dataset.id = Math.floor(Math.random() * 10000000000)const tools = document.createElement("div")tools.classList.add("tools");const edit = document.createElement("button")edit.classList.add("edit");event_dom(edit)edit.dataset.type = "edit"const del = document.createElement("button")del.classList.add("delete");event_dom(del)del.dataset.type = "del"const i_edit = document.createElement("i")i_edit.className = "iconfont icon-bianji"const i_del = document.createElement("i")i_del.className = "iconfont icon-shanchu"const textarea = document.createElement("textarea")textarea.setAttribute("readonly", "true")event_dom(textarea, 1)edit.appendChild(i_edit)del.appendChild(i_del)tools.appendChild(edit)tools.appendChild(del)note.appendChild(tools)note.appendChild(textarea)return note
}// 给新成的dom绑定事件,已经执行各种操作
function event_dom(dom, index = 0) {dom.addEventListener("click", function (e) {const { type } = this.datasetconst note = this.parentNode.parentNodeif (type == "del") {note.remove()const local = localStorage.getItem(`dom-${note.dataset.id}`)if (local) {localStorage.removeItem(`dom-${note.dataset.id}`)}} else {const text = note.children[1]text.removeAttribute("readonly")text.focus()}})if (index == 1) {dom.addEventListener("input", function (e) {const note = this.parentNodeconsole.log(this);console.log(e.target.value);this.setAttribute("value", e.target.value)console.log(this);localStorage.setItem(`dom-${note.dataset.id}`, note.outerHTML)})}
}

效果