仿todolist案例

HTML部分

<div class="todolist">
    <div class="header">
        <input type="text" placeholder="添加Todo" />
        <button>发布</button>
    </div>
    <div class="centent">
        <div>
            <h3 class="title">正在进行</h3>
            <ol></ol>
        </div>
        <div>
            <h3 class="title">已经完成</h3>
            <ul></ul>
        </div>
    </div>
</div>

CSS部分

      body {
        background: #ccc;
      }
      ol,
      ul {
        padding: 0;
        margin: 0;
      }
      a {
        color: #000;
        text-decoration: none;
      }
      a:hover {
        color: #888;
      }
      li {
        position: relative;
        width: 300px;
        height: 30px;
        line-height: 30px;
        background: #fff;
        list-style: none;
        margin-top: 8px;
      }
      li > input {
        padding: 0;
        margin-left: 10px;
      }
      li > p {
        display: inline;
        margin-left: 6px;
      }
      li > a {
        position: absolute;
        right: 10px;
      }

JS部分

$(function () {
      // 1.发布按钮
      $("button").on("click", function (ev) {
        //判断input的值是否为空
        if ($("input[type=text]").val() != 0) {
          //先获取本地数据，没有直接为空数组
          var data = getData();
          //   console.log(data);
          data.push({ val: $(this).siblings().val(), checked: false });
          //存储数据
          saveData(data);
        }
        showData();
      });
      // 2.渲染页面---页面加载后就渲染一下数据
      showData();
      // 3.删除功能----用jquery的事件委托功能给a添加事件
      $("ol,ul").on("click", "a", function () {
        // alert($(this).parent().data("index"));
        //获取本地数据
        var data = getData();
        //删除数据
        data.splice($(this).parent().data("index"), 1);
        //把修改后的数据保存到本地数据中
        saveData(data);
        //重新渲染页面
        showData();
      });
      //4.勾选复选框后放入已完成任务中
      $("ol,ul").on("change", "input", function () {
        //获取本地数据
        var data = getData();
        //修改数据
        data[$(this).parent().data("index")].checked = $(this).prop("checked");
        //在保存到本地数据中
        saveData(data);
        //重新渲染页面
        showData();
      });
      /***************
       ****实现方法***
       ****************/
      //获取本地数据-----------------------
      function getData() {
        //拿到本地json字符串数据
        var data = localStorage.getItem("todolist");
        //
        if (data !== null) {
          return JSON.parse(data);
        } else {
          return [];
        }
      }
      //存储本地数据------------------------
      function saveData(data) {
        localStorage.setItem("todolist", JSON.stringify(data));
      }
      //渲染本地数据-----------------------
      function showData() {
        //获取本地数据
        var data = getData();
        //先清空ol原数据,不然数据会叠加
        $("ol,ul").empty();
        //遍历data
        $.each(data, function (key, value) {
          //先判断data.checked的值是什么进行添加
          if (!value.checked) {
            // 在ol元素添加，生成的li从上面追加 同时给li元素添加自定义属性
            $("ol").prepend(
              $(
                '<li data-index="' +
                  key +
                  '"><input type="checkbox" /><p>' +
                  value.val +
                  '</p><a href="javascript:;">删除</a></li>'
              )
            );
          } else {
            $("ul").prepend(
              $(
                '<li style="background-color:#eee" data-index="' +
                  key +
                  '"><input type="checkbox" checked/><p>' +
                  value.val +
                  '</p><a href="javascript:;">删除</a></li>'
              )
            );
          }
        });
      }
    });

演示

注意

这里使用了jQuery需要先引入,这里使用的是本地存储功能,需要实际使用可以异步连接数据库操作