一个简单好看的备忘录
生活随笔
收集整理的這篇文章主要介紹了
一个简单好看的备忘录
小編覺得挺不錯的,現(xiàn)在分享給大家,幫大家做個參考.
首先上圖
增刪改查都已經(jīng)通過js實現(xiàn)
源碼index.html
<!DOCTYPE html> <html lang="en"> <head><meta charset="UTF-8"><meta http-equiv="X-UA-Compatible" content="IE=edge"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>Todolist</title><link rel="stylesheet" href="todolist.css"> </head> <body><div class="todo"><div class="box"><!-- 標題 --><p class="tit">備忘錄：</p><!-- 添加按鈕及其輸入框 --><div class="action"><input type="text" name="task" placeholder="請?zhí)顚憙?nèi)容"><button class="add">添加</button></div><!-- 備忘錄列表 --><ul class="list"><li class="item"><span class="info">周一早上例會</span><div class="control"><button class="edit">編輯</button><button class="finish">完成</button><button class="delete">刪除</button></div></li><li class="item"><span class="info">周二晚上加班</span><div class="control"><button class="edit">編輯</button><button class="finish">完成</button><button class="delete">刪除</button></div></li></ul></div></div> </body> <script>// 添加var input = document.querySelector('.action input') // 獲取第一個元素var addBtn = document.querySelector('.add')var list = document.querySelector('.list')addBtn.addEventListener('click', function() {list.insertAdjacentHTML('beforeend', `<li class="item"><span class="info">${input.value}</span><div class="control"><button class="edit">編輯</button><button class="finish">完成</button><button class="delete">刪除</button></div></li>`)list.lastElementChild.querySelector('.delete').addEventListener('click', function() {list.removeChild(this.parentNode.parentNode)})list.lastElementChild.querySelector('.finish').addEventListener('click', function() {var listItem = this.parentNode.parentNodelistItem.classList.add('finished')})list.lastElementChild.querySelector('.edit').addEventListener('click', function() {var listItem = this.parentNode.parentNodelistItem.querySelector('.info').innerText = prompt('請輸入修改內(nèi)容')})})// 刪除var delBtns = document.querySelectorAll('.delete') // 獲取元素集合// 完成var finishBtns = document.querySelectorAll('.finish')// 編輯var editBtns = document.querySelectorAll('.edit')for (var idx = 0; idx < delBtns.length; idx++) {// 刪除動作delBtns[idx].addEventListener('click', function() {list.removeChild(this.parentNode.parentNode)})// 完成動作finishBtns[idx].addEventListener('click', function() {var listItem = this.parentNode.parentNode// style對象// listItem.style.backgroundColor = '#a5f1b8'// classList對象listItem.classList.add('finished')})// 編輯動作editBtns[idx].addEventListener('click', function() {var listItem = this.parentNode.parentNodelistItem.querySelector('.info').innerText = prompt('請輸入修改內(nèi)容')})} </script> </html>todolist.css代碼
* {margin: 0;padding: 0; } div, ul, li, p, span {box-sizing: border-box; } li {list-style: none; } button {border: none;background-color: transparent;outline: none; } input{ background:none; outline:none; border:none; } body {background-color: #111; } .box {padding: 19px;margin: 20px auto;min-height: 20px;width: 540px;background-color: #f5f5f5;border: 1px solid #e3e3e3;border-radius: 5px;box-shadow: 0 1px 1px rgb(0, 0, 0, 5%);background-color: skyblue; } .box>.tit {font-size: 20px;font-weight: bold;color: #333; } .list {margin-top: 20px;border: 1px solid #ddd;border-radius: 5px; } .list>.item {padding: 10px 15px;background-color: #fff;border-top: 1px solid #ddd;display: flex;justify-content: space-between;align-items: center; } .list>.item:first-of-type {border-top-left-radius: 5px;border-top-right-radius: 5px;border-top: 0; } .list>.item:last-of-type {border-bottom-right-radius: 5px;border-bottom-left-radius: 5px; } .item>.info {color: #666;font-size: 14px; } .control>button {cursor: pointer;padding: 6px 12px;color: #fff;border-radius: 5px;font-size: 14px; } .edit {background-color: #337ab7;; } .finish {background-color: #20c248; } .delete {background-color: #d9534f; }.list>.finished {background-color: #a5f1b8; } .finished>.info {text-decoration: line-through; }.action {margin-top: 40px;display: flex;align-items: center; } .action>span {color: #333;font-size: 16px;font-weight: bold; } .action>input {width: 300px;height: 30px;border: 1px solid #ddd;background-color: #fff;border-radius: 5px;text-indent: 20px; } .action>button {cursor: pointer;margin-left: 20px;padding: 6px 12px;background-color: #ffffff;color: #333;border: 1px solid #666;border-radius: 5px;font-size: 14px; }總結(jié)
以上是生活随笔為你收集整理的一个简单好看的备忘录的全部內(nèi)容，希望文章能夠幫你解決所遇到的問題。
- 上一篇： RabbitMq第三种模型--fanou
- 下一篇： 配置jndi服务，javax.namin