普歌-飞灵团队【jquery】【toDoList】

Cnc_zj

于 2020-11-07 10:21:05 发布

阅读量113

点赞数

文章标签： jquery

本文链接：https://blog.csdn.net/BZJ0528_/article/details/109543299

版权

toDoList

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

文章目录

toDoList
分析
操作
- 图片示例：

分析

不管按下回车，还是点击复选框，都是把本地存储的数据加载到页面中，这样保证刷新关闭页面不会丢失数据

操作

1.按下回车把新数据添加到本地存储里面
2.本地存储数据渲染加载到页面
3.删除操作
4.正在进行和已完成选项操作

代码演示如下：toDoList.js

$(function () {
  // alert(11);
  // 1. 按下回车 把完整数据 存储到本地存储里面
  // 存储的数据格式  var todolist = [{title: "xxx", done: false}]
load();
$("#title").on("keydown", function (event) {
    if (event.keyCode === 13) {
        if ($(this).val() === "") {
        alert("请输入您要的操作");
      } else {
        // 先读取本地存储原来的数据
        var local = getDate();
        // console.log(local);
        // 把local数组进行更新数据 把最新的数据追加给local数组
        local.push({
          title: $(this).val(),
          done: false,
        });
        // 把这个数组local 存储给本地存储
        saveDate(local);
        // 2. toDoList 本地存储数据渲染加载到页面
        load();
        $(this).val("");
      }
    }
  });
  // 3. toDoList 删除操作
  $("ol, ul").on("click", "a", function () {
    // alert(11);
    // 先获取本地存储
    var data = getDate();
    console.log(data);
    // 修改数据
    var index = $(this).attr("id");
    console.log(index);
    data.splice(index, 1);
    // 保存到本地存储
    saveDate(data);
    // 重新渲染页面
    load();
  });

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

    // 保存到本地存储
    saveDate(data);
    // 重新渲染页面
    load();
  });

  // 读取本地存储的数据
  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));
  }

  // 渲染加载数据
  function load() {
    // 读取本地存储的数据
    var data = getDate();
    console.log(data);
    // 遍历之前先要清空ol里面的元素内容
    $("ol, ul").empty();
    var todoCount = 0; // 正在进行的个数
    var doneCount = 0; // 已经完成的个数
    // 遍历这个数据
    $.each(data, function (i, n) {
      // console.log(n);
      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);
  }
});

图片示例：

在这里插入图片描述

下面附上HTML+CSS代码：

<!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="css/index.css" />
    <script src="js/jQuery.min.js"></script>
    <script src="js/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>
      <h2>已经完成 <span id="donecount"></span></h2>
      <ul id="donelist"></ul>
    </section>
    <footer>Copyright &copy; 2020 todolist.cn</footer>
  </body>
</html>

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