js实现的todolist

 * {
    margin: 0;
    padding: 0
  }

  body {
    background-color: rgb(205, 205, 205);
  }

  .header {
    background-color: #000;
    height: 60px;

  }

  .header-bar {
    width: 500px;
    margin: 0 auto;
  }

  .header-title {
    font-size: 30px;
    line-height: 60px;
    color: #fff;

  }

  .header-textbox {
    float: right;
    margin-top: 18px;
    line-height: 25px;
    width: 300px;
    border: 0;
    border-radius: 5px;
    text-indent: 5px;
    box-shadow: -10px -1px -1px #eee;
  }

  .banner {
    width: 500px;
    margin: 50px auto;
  }

  .done-box {
    margin-top: 50px;
  }

  .done-box,
  .nodo-box {
    position: relative;
  }

  .notice {
    position: absolute;
    width: 15px;
    height: 15px;
    line-height: 15px;
    text-align: center;
    border-radius: 50%;
    background-color: #bbb;
    top: 10px;
    right: 0;
  }

  .nodoList,
  .doneList {
    margin: 0;
    padding: 0;
    list-style: none;
    width: 500px;
    margin-top: 15px;
  }




  .banner ul li {
    height: 35px;
    line-height: 35px;
    font-size: 25px;
    box-shadow: -5px 0px 0px rgb(98, 154, 156);
    border-radius: 2px;
    margin-top: 5px;
    background-color: #fff;
  }

  .done-box ul li {
    background-color: rgba(230, 230, 230);
    color: rgb(103, 103, 103);
    box-shadow: -5px 0px 0px rgb(179, 179, 179);
    opacity: 0.5;
  }

  [type=checkbox] {
    cursor: pointer;
  }

  .done-box ul li [type=checkbox] {
    background-color: rgb(136, 136, 136);
  }

  .banner ul li [type=checkbox] {
    zoom: 180%;
    position: relative;
    top: 2px;
    left: 5px;
  }

  .banner ul li span {
    display: inline-block;
    margin-left: 15px;
  }

  .banner ul li a {
    float: right;
    height: 15px;
    width: 15px;
    border-radius: 50%;
    background-color: #ccc;
    margin: 10px 8px 0 0;
  }

  h3 {
    font-size: 30px
  }

<div class="header">
    <div class="header-bar">
      <span class="header-title">toDoList</span>
      <input type="text" placeholder="请输入要做什么" class="header-textbox">
    </div>
  </div>
  <div class="banner">
    <div class="nodo-box">
      <h3>你没有做什么</h3><span class="notice">0</span>
      <ul class="nodoList">

      </ul>
    </div>
    <div class="done-box">
      <h3>你做了什么</h3><span class="notice">0</span>
      <ul class="doneList">

      </ul>
    </div>
  </div>

    var dataList = [{
      title: 'poi',
      isDo: false
    }]
    var doneUl = document.querySelector('.doneList')
    var nodoUl = document.querySelector('.nodoList')
    var noticeNoDo = document.querySelectorAll('.notice')[0]
    var noticeDone = document.querySelectorAll('.notice')[1]
    var isDoList = []
    var noDoList = []
    getData()
    init()

    function init() {
      isDoList = []
      noDoList = []
      for (let i = 0; i < dataList.length; i++) {
        let iHtml = '<li data-index="' + i + '"><input class="selectCheck" type="checkbox"' + (dataList[i].isDo ?
            "checked" : "") +
          '><span>' + dataList[i].title +
          '</span><a class="delete" href="javascript:;"></a></li>'
        if (dataList[i].isDo) {
          isDoList.push(iHtml)
        } else {
          noDoList.push(iHtml)
        }
      }
      doneUl.innerHTML = isDoList.join('')
      nodoUl.innerHTML = noDoList.join('')

      noticeDone.innerText = isDoList.length
      noticeNoDo.innerText = noDoList.length
      var noDoCheckList = nodoUl.querySelectorAll('.selectCheck')
      for (let i = 0; i < noDoCheckList.length; i++) {
        noDoCheckList[i].addEventListener('click', function () {
          var parentE = this.parentElement
          var index = parentE.getAttribute('data-index')
          dataList[index].isDo = true
          setData()
          init()
        })
      }
      var isDoCheckList = doneUl.querySelectorAll('.selectCheck')
      for (let i = 0; i < isDoCheckList.length; i++) {
        isDoCheckList[i].addEventListener('click', function () {
          var parentE = this.parentElement
          var index = parentE.getAttribute('data-index')
          dataList[index].isDo = false
          setData()
          init()
        })
      }
      var deleteBtn = document.querySelectorAll('.delete')
      for (let i = 0; i < deleteBtn.length; i++) {
        deleteBtn[i].addEventListener('click', function () {
          var parentLi = this.parentElement
          var moveIndex = parentLi.getAttribute('data-index')
          dataList.splice(moveIndex, 1)
          init()
          setData()
          this.parentElement.remove()
        })
      }
    }
    var dataTxt = document.querySelector('.header-textbox')
    dataTxt.addEventListener('keydown', function (e) {
      if (this.value.trim() != '') {
        if (e.keyCode == 13) {
          getData()
          dataList.push({
            title: this.value,
            isDo: false
          })
          setData()
          init()
          this.value = ''
        }
      }
    })

    function getData() {
      dataList = localStorage.getItem('toDoSomeThing')
      if (dataList !== null) {
        dataList = JSON.parse(dataList)
      } else {
        dataList = []
      }
    }

    function setData() {
      localStorage.setItem('toDoSomeThing', JSON.stringify(dataList))
    }