用jQuery写ToDoList

不必问山谷

于 2022-12-01 22:26:40 发布

阅读量248

点赞数

文章标签： jquery javascript css

本文链接：https://blog.csdn.net/li_xinyide/article/details/128139859

版权

<!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>
  
</html>

    <style>
      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;
        }
      }
    </style>

    <script src="js/jquery.min.js"></script>
    <script>
      $(function () {
        // 1. 按下回车 把完整数据 存储到本地存储里面    toDoList 分析
        // 1.1刷新页面不会丢失数据，因此需要用到本地存储 localStorage
        // 1.3存储的数据格式  var todolist = [{title: "xxx", done: false}]
        load();
        // 2.toDoList 按下回车把新数据添加到本地存储里面
        $("#title").on("keydown", function (event) {
          // 2.2利用事件对象.keyCode判断用户按下回车键（13）。
          if (event.keyCode === 13) {
            if ($(this).val() === "") {
              alert("请输入您要的操作");
            } else {
              // 2.3声明一个数组local，保存数据
              // 2.4先读取本地存储原来的数据 声明函数 getData()，放到这个数组local里面。
              var local = getDate();
              // 2.5之后把最新从表单获取过来的数据，追加到数组local里面
              local.push({
                title: $(this).val(),
                done: false,
              });
              // 2.6把这个数组local 存储给本地存储
              saveDate(local);

              // 2. toDoList 本地存储数据渲染加载到页面
              load();
              $(this).val("");
            }
          }
        });

        // 读取本地存储的数据
        function getDate() {
          var data = localStorage.getItem("todolist");
          if (data !== null) {
            // 本地存储里面的数据是字符串格式的 但是我们需要的是对象格式的
            return JSON.parse(data);
          } else {
            return [];
          }
        }

        // 保存本地存储数据
        function saveDate(data) {
          localStorage.setItem("todolist", JSON.stringify(data));
        }
        // 3.toDoList 本地存储数据渲染加载到页面
        // 渲染加载数据
        function load() {
          // 读取本地存储的数据
          var data = getDate();
          console.log(data);
          // 遍历之前先要清空ol里面的元素内容
          $("ol, ul").empty();
          // 5.2声明2个变量 ：todoCount 待办个数  doneCount 已完成个数
          var todoCount = 0; // 正在进行的个数
          var doneCount = 0; // 已经完成的个数
          // 3.3遍历这个数据（$.each()），有几条数据，就生成几个小li 添加到 ol 里面。
          $.each(data, function (i, n) {
            // 5.3当进行遍历本地存储数据的时候， 如果 数据done为 false， 则 todoCount++, 否则 doneCount++
            if (n.done) {
              $("ul").prepend(
                "<li><input type='checkbox' checked='checked' > <p>" +
                  n.title +
                  "</p><a href=''id=" +
                  i +
                  "></a></li>"
              );
              doneCount++;
            } else {
              $("ol").prepend(
                "<li><input type='checkbox' > <p>" +
                  n.title +
                  "</p><a href='javascript:;' id=" +
                  i +
                  " ></ a></li>"
              );
              todoCount++;
            }
          });
          // 5.4修改相应的元素 text()
          $("#todocount").text(todoCount);
          $("#donecount").text(doneCount);
        }

        // 4. toDoList 删除操作
        // 4.1点击里面的a链接，不是删除的li，而是删除本地存储对应的数据
        // 4.7因为a是动态创建的，我们使用on方法绑定事件
        $("ol, ul").on("click", "a", function () {
          // 4.2先获取本地存储数据，删除对应的数据，保存给本地存储，重新渲染列表li
          var data = getDate();
          console.log(data);
          // 4.3给链接自定义属性记录当前的索引号
          var index = $(this).attr("id");
          // 4.4根据这个索引号删除相关的数据----数组的splice(i, 1)方法
          data.splice(index, 1);
          // 4.5存储修改后的数据，然后存储给本地存储
          saveDate(data);
          // 4.6重新渲染加载数据列表
          load();
        });

        // 5. toDoList 正在进行和已完成选项操作
        $("ol, ul").on("click", "input", function () {
          // 先获取本地存储的数据
          var data = getDate();
          // 修改数据
          var index = $(this).siblings("a").attr("id");
          data[index].done = $(this).prop("checked");

          // 保存到本地存储
          saveDate(data);
          // 重新渲染页面
          load();
        });
      });
    </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>

      <h2>已经完成 <span id="donecount"></span></h2>

      <ul id="donelist"></ul>

    </section>

    <footer>Copyright &copy; 2012 todolist.cn</footer>

  </body>

</html>

不必问山谷

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
用jQuery写ToDoList

文本框里面输入内容，按下回车，就可以生成待办事项。点击待办事项复选框，就可以把当前数据添加到已完成事项里面。点击已完成事项复选框，就可以把当前数据添加到待办事项里面。但是本页面内容刷新页面不会丢失。
复制链接

扫一扫