今日待办案例--- highlight: a11y-dark --- ![Snipaste_2022-02-09_21-

<!DOCTYPE html>
<html lang="en">

![Snipaste_2022-02-11_16-32-03.jpg](https://p9-juejin.byteimg.com/tos-cn-i-k3u1fbpfcp/4a3f822827724273bf8094a6a71d89a3~tplv-k3u1fbpfcp-watermark.image?)
<head>
  <meta charset="UTF-8" />
  <meta name="viewport" content="width=device-width, initial-scale=1.0" />
  <meta http-equiv="X-UA-Compatible" content="ie=edge" />
  <title>Document</title>
  <link rel="stylesheet" href="./index.css" />
</head>

<body>
  <div id="app">
    <div class="box">
      <h1>待办列表</h1>
      <div class="tool">
        <input autofocus="" class="userTask" type="text" placeholder="请输入代办事项" />
      </div>
      <ul id="list">
        <!--  <li class="">
          <div>
            <input class="ck" type="checkbox" /><span class="false">写1000代码</span>
          </div>
          <button class="del">X</button>
        </li>
        <li class="finished">
          <div>
            <input class="ck" type="checkbox" checked="" /><span class="false">调100个bug</span>
          </div>
          <button class="del">X</button>
        </li>
        <li class="">
          <div>
            <input class="ck" type="checkbox" /><span class="false">解决组员的10个问题</span>
          </div>
          <button class="del">X</button>
        </li> -->
      </ul>
      <section>
        <span class="nodone">4 未完成</span><a href="#" class="done">清理 <b>0</b> 已完成</a>
      </section>
    </div>
  </div>

  <script>
    // 获取本地存储
    let data = JSON.parse(localStorage.getItem('key1')) || []
    // 创建填充数组
    /* let data = [
      { id: 1, state: false, task: '写1000代码' },
      { id: 2, state: true, task: '调100个bug' },
      { id: 3, state: false, task: '解决组员的10个问题' }
    ] */
    // console.log(data)
    // 获取元素
    let userTask = document.querySelector('.userTask')
    let nodone = document.querySelector('.nodone')
    let done = document.querySelector('.done')
    let list = document.querySelector('#list')
    // 封装
    function init() {
      // 设置一个新数组
      let newStr = ''
      // 遍历填充数组
      // 自定义data-id
      data.forEach(function (v, i) {
        newStr += `<li class="${v.state ? 'finished' : ''}">
          <div>
            <input class="ck" type="checkbox" data-id="${v.id}"${v.state ? 'checked' : ''} /><span class="false">${v.task}</span>
          </div>
          <button class="del" data-id="${v.id}">X</button>
        </li>`
      })
      // console.log(newStr)
      // 输出到页面
      list.innerHTML = newStr
    }
    // 渲染
    init()
    un()
    save()
    // 新增:keydown事件
    document.addEventListener('keydown', function (e) {
      if (e.keyCode == 13) {
        // console.log(123);
        // 创建新对象
        let num = {
          id: data.length > 0 ? data[data.length - 1].id + 1 : 1,
          state: false,
          task: userTask.value
        }
        data.push(num)
        init()
        un()
      }

    })
    // 未完成状态框
    function un() {
      // 遍历状态
      let index = 0, index2 = 0
      data.forEach(function (v, i) {
        if (v.state == false) {
          index++
        } else if (v.state == true) {//已完成状态框
          index2++
        }
      })
      nodone.innerHTML = `${index}未完成`
      done.innerHTML = `清理${index2}已完成`
    }
    // 事件委托
    list.addEventListener('click', function (e) {
      // 判断
      // 未完成
      if (e.target.className == 'ck') {
        let id = e.target.dataset.id
        console.log(1);
        data.forEach(function (v, i) {
          if (id == v.id) {
            v.state = !v.state
            init()
            save()
            un()
          }
        })
      } else if (e.target.className == 'del') {    //已完成
        let id = e.target.dataset.id
        console.log(id);
        data.forEach(function (v, i) {
          if (id == v.id) {
            data.splice(i, 1)
            init()
            save()
            un()
          }
        })
      }
    })
    // 本地存储
    function save() {
      localStorage.setItem('key1', JSON.stringify(data))
    }
    // 清理已完成
    done.addEventListener('click', function () {
      data = data.filter(function (v, i) {
        return v.state == false
      })
      init()
      save()
      un()
    })

  </script>
</body>

</html>