在进修完HTML、CSS和一些JS后，博主也操作一些空余的时间的写了一个关于JS简朴应用的Demo，主要实现的是一个Todolist（雷同于记事本）的应用，可以实现数据的增、删、改、查，而且利用localStorage实现数据的当地耐久化存储，详细就接着往下看吧。
2、运行截图
往输入框里输入内容：
举办添加后默认添加到未完成一栏：
将方才添加的事项举办修改：
修改乐成：
将修改乐成后的事项配置成已完成：
对“干饭”、“睡觉”举办删除：
话不多说，先贴上代码：
HTML部门：
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>TodoList</title> <link type="text/css" href="https://www.jb51.net/index.css" /> </head> <body> <!-- header --> <div> <label>TodoList</label> <input type="text" placeholder="请输入代服务项"> <button>添加</button> </div> <!-- content --> <div> <h1>未完成</h1> <span></span> <ol> </ol> <h1>已完成</h1> <span></span> <ol> </ol> </div> </body> <script type="text/javascript" src="https://www.jb51.net/index.js"></script> </html>
主要是分成两个部门，一个是头部输入框的部门，尚有一个就是内容显示部门，todocount和donecount暗示未完成事项和已完成事项的数目，list则是显示详细的事项，这边默认是没有的，在js举办事项的添加并显示。
CSS部门：
* { margin: 0; padding: 0; } body { background-color: #b8c9ff; } #header { margin: 0 auto; font-size: 50px; width: 700px; text-align: center; height: 150px; } .title { display: inline-flex; } .head { -webkit-appearance: none; border-radius: 25px; width: 500px; height: 60px; box-shadow: 5px 5px 10px #556677; border: 1px solid #556677; font-size: 30px; padding-left: 25px; outline: 0; margin: 0 auto; display: inline-flex; } .add { width: 80px; height: 50px; border-radius: 25px; outline: 0; border: 1 solid #556677; float: right; margin: 20px 0 0; font-size: 20px; } #container { margin: 0 auto; width: 700px; height: 150px; } .del { width: 120px; height: 70px; border-radius: 25px; outline: 0; border: 1 solid #556677; font-size: 20px; display: flex; margin: 0 auto; } ol { margin-top: 20px; margin-bottom: 20px; } ol li { width: 600px; height: 30px; background-color: #fff; list-style: none; text-align: center; font-size: 20px; border-radius: 25px; margin-top: 10px; padding: 10px; box-shadow: 5px 5px 10px #556677; } ol li span { float: left; } ol li button { float: right; width: 70px; height: 30px; margin-top: 0px; margin-left: 10px; border-radius: 25px; box-shadow: 5px 5px 10px #556677; outline: 0; } .del1 { background-color: #f40; border-radius: 25px; width: 50px; height: 30px; box-shadow: 5px 5px 10px #556677; outline: 0; } .edit { background-color: royalblue; border-radius: 25px; width: 50px; height: 30px; box-shadow: 5px 5px 10px #556677; outline: 0; color: #FFFFFF; } #todocount { width: 30px; height: 30px; background-color: #FFFFFF; display: inline-block; border-radius: 50%; float: right; font-size: 1em; margin-top: 10px; text-align: center; line-height: 30px; } #donecount { width: 30px; height: 30px; background-color: #FFFFFF; display: inline-block; border-radius: 50%; float: right; font-size: 1em; margin-top: 10px; text-align: center; line-height: 30px; }
CSS部门这边就不赘述啦，博主自认为做的很胯，各人有做的话可以本身举办一下优化。
JS部门：