7. todoList待办事情列表(js本地存储)

1. 功能
   

2. css代码

   *{
       padding:0;
       margin:0;
   }
   ul{
       list-style: none;
   }
   ol{
       list-style: none;
   }
   body{
       background-color: #cdcdcd;
   }
   h2{
       margin:20px 0;
       position: relative;
   }
   h2 span{
       height: 20px;
       width: 20px;
       background-color: #E6E6FA;
       border-radius: 50%;
       position: absolute;
       font-size:16px;
       right: 0;
       text-align: center;
       line-height: 20px;
       color:#666;
   }
   .container{
       width:600px;
       margin: 0 auto;
   
   }
   .f_left{
       float: left;
   }
   .f_right{
       float: right;
   }
   .title{
       background-color: rgba(47, 47, 47, 0.98);
       height: 50px;
   }
   .title span{
       font-size:25px;
       color:#ddd;
       line-height: 50px;
       display: block;
   }
   .title input{
       border: none;
       height: 25px;
       width: 360px;
       border-radius: 5px;
       margin-top:12px;
       text-indent: 1em;
       box-shadow: 1px 1px 6px 0 #999 inset;
   }
   li{
       position: relative;
       border-left: 5px solid  #629A9C;
       border-radius:2px;
       background-color: #fff;
       padding:5px 0;
       margin-top:15px;
   }
   li p {
       margin-left: 40px;
       margin-right: 40px;
   }
   li .final{
       height: 22px;
       width: 22px;
       position: absolute;
       left: 10px;
   }
   li .del{
       position: absolute;
       right: 10px;
       width: 14px;
       height: 14px;
       border-radius: 50%;
       border:6px double #fff;
       top:2px;
       background-color: #ccc;  
       cursor:pointer;      
   }
   .final_list li{
       border-left-color: #999;
       background-color: #fff;
       opacity: 0.5;
   }
   

3. HTML代码

   <div class="title">
       <div class="container">
           <span class="f_left">ToDoList</span><input type="text" name="title" id="title" class="f_right" placeholder="添加todo">
       </div>
   </div>
   <div class="container">
       <h2>正在进行 <span class="todo_num">0</span></h2>
       <ul class="todo_list">
       </ul>
   </div>
   <div class="container">
       <h2>已经完成 <span class="final_num">0</span></h2>
       <ol class="final_list">
           
       </ol>
   </div>
   

4. js代码（需要引用jquery）
   <script src=“js/jquery.min.js”>

   $(function(){
      showData();
      //用户点击回车触发事件
      $("#title").keyup(function(e){
         if(e.keyCode === 13){
              var text = $(this).val();  
              if(text == null || text == ''){
                  return false;
              }
              var local = getData();
              //将任务记录下来,添加到正在进行的
              var data = {title:text,done:false};
              local.push(data);
              setData(local);
              //将任务添加到正在进行的列表中
              showData();
              //清空文本框
              this.value = '';
         }
      });
      //将一个任务添加到列表 i 该数据在数组中的索引号,text内容，final是否完成
      function addList(i, text, final){
          if(final){
              var html = '<li data-id="' + i + '"><input type="checkbox" class="final" checked><p>'+text+'</p><div class="del" ></div></li>';
              $('.final_list').prepend(html);
          }else{
              var html = '<li data-id="' + i + '"><input type="checkbox" class="final" ><p>'+text+'</p><div class="del"></div></li>';
              $('.todo_list').prepend(html);
          }
      }
      //修改数量的显示个数
      function updataNum(num, final){ 
          if(final){
              $(".final_num").text(num);
          }else{
              $(".todo_num").text(num);
          }
         // final == true ? $(".final_num").text(num) : $("todo_num").text(num);
      }
      //循环所有数据显示到页面中
      function showData(){
          clearList();
          var data = getData();
          //记录已完成和未完成任务的个数
          var finalNum  = 0;
          var todoNum = 0;
          if(data !== null){
              $.each(data, function(i, n){
                  if(n.done){
                      finalNum ++;
                  }else{
                      todoNum ++;
                  }
                  addList(i, n.title, n.done); 
              });
          }
          updataNum(finalNum, true);
          updataNum(todoNum, false);
      }
      //清空列表
      function clearList(){
          $(".todo_list").children().remove();
          $(".final_list").children().remove();
      }
      //获取所有数据
      function getData(){
          var data = localStorage.getItem('todoList');
          if(data == null){
              return [];
          }else{
              return JSON.parse(data);
          }
      }
      //保存所有数据
      function setData(data){
          localStorage.setItem('todoList', JSON.stringify(data));
      }
      //删除数据
      function delData(ele){       
          var id = $(ele).parent().attr('data-id');
          var data = getData();
          data.splice(id,1);
          setData(data);
          showData();
      }
      $(".todo_list").on('click', '.del', function(){
          delData(this)
      });
      $(".final_list").on('click', '.del', function(){
          delData(this)
      });
      //完成任务
      $(".todo_list").on('click', 'input', function(){
          var id = $(this).parent().attr('data-id'); 
          var data = getData();
          data[id].done = true;
          setData(data);
          showData();
      });
      //取消完成的任务,变为正在进行的
      $(".final_list").on("click", 'input', function(){                
          var id = $(this).parent().attr('data-id');
          var data = getData();
          data[id].done = false;
          setData(data);
          showData();
      });
   });