欢迎光临
我的个人博客网站

JavaScript jQuery 任务清单 ToDoList


代码实现:

ToDoList.html(复制并保存为html文件,打开即可见效果):

<!DOCTYPE html> <html>  <head>     <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />     <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no" />     <title>ToDoList—最简单的待办事项列表</title>     <link rel="stylesheet" href="https://blog-static.cnblogs.com/files/jacklzx/ToDoList.css">     <script src="https://blog-static.cnblogs.com/files/jacklzx/jquery.min.js"></script>     <script src="https://blog-static.cnblogs.com/files/jacklzx/ToDoList.js"></script> </head>  <body>     <header>         <section>             <label for="title">ToDoList</label>             <input type="text" id="title" name="title" placeholder="请输入ToDo" required="required" autocomplete="off" />         </section>     </header>     <section>         <h2>正在进行 <span id="todocount"></span></h2>         <ol id="todolist" class="demo-box">         </ol>         <hr>         <h2>已经完成 <span id="donecount"></span></h2>         <ul id="donelist">         </ul>     </section>  </body>  </html> 

ToDoList.css:

body {     margin: 0;     padding: 0;     font-size: 16px;     background: #CDCDCD; }  header {     height: 50px;     background: #333;     background: rgba(47, 47, 47, 0.98); }  section {     margin: 0 auto; }  label {     float: left;     width: 100px;     line-height: 50px;     color: #DDD;     font-size: 24px;     cursor: pointer;     font-family: "Helvetica Neue", Helvetica, Arial, sans-serif; }  header input {     float: right;     width: 60%;     height: 24px;     margin-top: 12px;     text-indent: 10px;     border-radius: 5px;     box-shadow: 0 1px 0 rgba(255, 255, 255, 0.24), 0 1px 6px rgba(0, 0, 0, 0.45) inset;     border: none }  input:focus {     outline-width: 0 }  h2 {     position: relative; }  span {     position: absolute;     top: 2px;     right: 5px;     display: inline-block;     padding: 0 5px;     height: 20px;     border-radius: 20px;     background: #E6E6FA;     line-height: 22px;     text-align: center;     color: #666;     font-size: 14px; }  ol, ul {     padding: 0;     list-style: none; }  li input {     position: absolute;     top: 2px;     left: 10px;     width: 22px;     height: 22px;     cursor: pointer; }  p {     margin: 0; }  li p input {     top: 3px;     left: 40px;     width: 70%;     height: 20px;     line-height: 14px;     text-indent: 5px;     font-size: 14px; }  li {     height: 32px;     line-height: 32px;     background: #fff;     position: relative;     margin-bottom: 10px;     padding: 0 45px;     border-radius: 3px;     border-left: 5px solid #629A9C;     box-shadow: 0 1px 2px rgba(0, 0, 0, 0.07); }  ol li {     cursor: move; }  ul li {     border-left: 5px solid #999;     opacity: 0.5; }  li a {     position: absolute;     top: 2px;     right: 5px;     display: inline-block;     width: 14px;     height: 12px;     border-radius: 14px;     border: 6px double #FFF;     background: #CCC;     line-height: 14px;     text-align: center;     color: #FFF;     font-weight: bold;     font-size: 14px;     cursor: pointer; }  footer {     color: #666;     font-size: 14px;     text-align: center; }  footer a {     color: #666;     text-decoration: none;     color: #999; }  @media screen and (max-device-width: 620px) {     section {         width: 96%;         padding: 0 2%;     } }  @media screen and (min-width: 620px) {     section {         width: 600px;         padding: 0 10px;     } } 

ToDoList.js

$(function() {     // 页面每次加载,就自动渲染一次数据     load();     $("#title").on("keydown", function(event) {         // 判断用户按下了回车键(13)         if (event.keyCode == 13) {             if ($(this).val() == "") {                 alert("请输入待办事项!");             } else {                 // 先读取本地存取原来的数据                 var local = getData();                 // 把最新的数据追加给local                 local.push({ title: $(this).val(), done: false });                 // 把local存到本地存储                 saveData(local);                 load();                 // 加载完毕后删除input中的文本                 $(this).val("");             }         }     });      //删除操作     $("ol,ul").on("click", "a", function() {         // 获取本地存储         var data = getData();         // 修改数据         var index = $(this).attr("id");         // console.log(index);         // 元素.splice(从第几个位置开始删除,删除几个)         data.splice(index, 1);         // 保存到本地存储         saveData(data);         // 重新渲染页面         load();     });      // 正在进行、已经完成操作     $("ol,ul").on("click", "input", function() {         var data = getData();         var index = $(this).siblings("a").attr("id");         // console.log(index);         data[index].done = $(this).prop("checked");         saveData(data);         load();     });       // 读取本地存储的数据     function getData() {         var data = localStorage.getItem("todolist");         if (data !== null) {             // 本地存储的数据格式是字符串,需要转化成对象             return JSON.parse(data);         } else {             return [];         }     }     // 保存本地存储数据     function saveData(data) {         // 存储前要转化为字符串         localStorage.setItem("todolist", JSON.stringify(data));     }     // 渲染加载数据     function load() {         var data = getData();         // console.log(data);         // 遍历之前先清空ol和ul里的内容         $("ol,ul").empty();         var todoCount = 0; // 正在进行的个数         var doneCount = 0; // 已完成的个数         // 遍历数据data         $.each(data, function(i, n) {             // console.log(n);             // 追加数据,并创建自定义id索引号             if (n.done) {                 $("ul").prepend("<li><input type='checkbox' checked='checked'> <p>" + n.title + "</p> <a href='javascript:;' id=" + i + "></a></li>");                 doneCount++;             } else {                 $("ol").prepend("<li><input type='checkbox'> <p>" + n.title + "</p> <a href='javascript:;' id=" + i + "></a></li>");                 todoCount++;             }         });         // 修改显示的个数         $("#todocount").text(todoCount);         $("#donecount").text(doneCount);     } }); 
赞(0) 打赏
未经允许不得转载:张拓的天空 » JavaScript jQuery 任务清单 ToDoList
分享到: 更多 (0)

评论 抢沙发

  • 昵称 (必填)
  • 邮箱 (必填)
  • 网址

专业的IT技术经验分享 更专业 更方便

联系我们本站主机

觉得文章有用就打赏一下文章作者

支付宝扫一扫打赏

微信扫一扫打赏