demo ‘todolist’项目开发

todolist-site-----------主文件夹
　　css------------css文件文件夹
　　　　header.css---主页面头部样式css
       section.css---主页面内容样式css
       footer.css---主页面尾部样式css
　　　　reset.css---清除默认样式css
　　js-------------js文件文件夹
　　　　index.js---js脚本文件
　　index.html-----启动程序
    

本项目参考了http://www.todolist.cn/点击打开链接，对代码进行了一些精简，并添加了一些功能。在实现项目的过程中，首先是实现最基本的功能，然后不断地添加增强功能和美化。

1 2 3 4 5 6 7 8 9

参考链接http://www.todolist.cn/   1.将用户输入添加至待办项   2.可以对todolist进行分类（待办项和已完成组），用户勾选既将待办项分入已完成组   3.todolist的每一项可删除和编辑   4.下方有clear按钮，并清空所有todolist项

　　

header.css

 /*背景*/
 body{
     background-color: #cdcdcd;
     font-size: 16px;
 }
 /*头部*/
 .header{
     height: 50px;
     background-color: #333;
 }
 .header .section h3{
     float: left;
     color: #ddd;
     font-size: 24px;
     line-height: 50px;
 }
 .header .section input{
     float: right;
     width: 60%;
     height: 24px;
     margin-top: 12px;
     text-indent: 10px;
     border-radius: 5px;
     border: none;
 }
 .header .section button{
     float: right;
     width: 35px;
     height: 24px;
     margin-top: 12px;
     border-radius: 5px;
     border: none;
     text-indent:10px 10px;
     text-align: center;
 }

section.css

 .section{
     width: 600px;
     padding: 0 10px;
     margin: 0 auto;
     overflow:hidden;
 }
 .section h2{
     position: relative;
     display: block;
     width: 100%;
     font-size: 24px;
     line-height: 30px;
     margin-block-start: 0.83em;
     margin-block-end: 0.83em;
     font-weight: bold;
     text-align: left
 }
 .section h2 span{
     position: absolute;
     top: 13px;
     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;
 }
 .section ul{
     list-style: none;
 }
 .section ul 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);
 }
 .section ul li>input{
     position: absolute;
     top: 6px;
     left: 10px;
     width: 22px;
     height: 22px;
     cursor: pointer;
 }
 .section ul 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;
 }
 .section #donelist li{
     opacity: 0.5;
 }

footer.css

 .footer {
     color: #666;
     font-size: 15px;
     text-align: center;
 }
 .footer a{
     color: #666;
     text-decoration: none;
     color: #999;
 }

reset.css

/*百度*/
body{
font-family:arial,helvetica,sans-serif;
font-size:13px;
font-size-adjust:none;
font-stretch:normal;
font-style:normal;
font-variant:normal;
font-weight:normal;
line-height:1.4;
text-align:center;
}
body, ul, ol, dl, dd, h1, h2, h3, h4, h5, h6, p, form, fieldset, legend, input, textarea, select, button, th, td {
margin:0;
padding:0;
}
h1, h2, h3, h4, h5, h6 {
font-size:100%;
font-weight:normal;
}
table {
font-size:inherit;
}
input, select {
font-family:arial,helvetica,clean,sans-serif;
font-size:100%;
font-size-adjust:none;
font-stretch:normal;
font-style:normal;
font-variant:normal;
font-weight:normal;
line-height:normal;
}
button {
overflow:visible;
}
th, em, strong, b, address, cite {
font-style:normal;
font-weight:normal;
}
li {
list-style-image:none;
list-style-position:outside;
list-style-type:none;
}
img, fieldset {
border:0 none;
}
ins {
text-decoration:none;
}

　　index.js

 var todolist = $('todolist');
 var donelist = $('donelist');
 var todoCount = $('todocount');
 var doneCount = $('donecount');
 var todoc =0;
 var donec=0;
 //添加todolist
 function postaction(){
     //获取用户输入内容
     var contant = $('searchinput').value;
     //判断
     if(contant.length === 0){
         alert('请输入内容');
         return;
     }
     //创建li标签插入
     var newli = document.createElement('li');
     newli.innerHTML ="<input type='checkbox' onchange ='update()'>"+"<p onclick='edit()'>"+ contant+ "</p>" + "<a herf = 'javescript:void(0)'>-</a>";
     $('todolist').insertBefore(newli,$('todolist').children[0]);
     loop('todolist');
     todoc++;
     todoCount.innerText = todoc;
     //清空输入框的内容
     $('searchinput').value = '';
 }
 // 循环每次添加不同的i值
 function loop(str){
     var list = null;
     str ==='todolist' ? list = todolist :list =donelist;

     childs = list.childNodes;
     for(var i=0; i<childs.length;i++){
         childs[i].children[0].setAttribute('onchange','update("'+i+'","'+str+'")');
         childs[i].children[1].setAttribute('onclick','edit("'+i+'","'+str+'")');
         childs[i].children[1].setAttribute('onchange','change("'+i+'","'+str+'")');
         childs[i].children[2].setAttribute('href','javascript:remove("'+i+'","'+str+'")');
     }
 }
 //update方法
 function update(n,str){
     var list = null;
     str === 'todolist' ? list = todolist : list = donelist;

     var li = null;
     childs = list.childNodes;
     for(var i=0;i<childs.length;i++){
         if(i===Number(n)){
             li = childs[i];
         }
     }
      // 删除原有的，得到li 并刷新了原有的li
     remove(n,str);

     if(str==='todolist'){
         if(donec ===0){
             donelist.appendChild(li);
         }else {
             donelist.insertBefore(li,donelist.children[0]);
         }
         loop('donelist');
         donec++;
         doneCount.innerText = donec;
     }else if(str ==='donelist'){
         todolist.appendChild(li);
         loop('todolist');
         todoc++;
         todoCount.innerText = todoc;
     }
 }
 //修改span
 function edit(n,str){
     var list = null;
     str ==='todolist' ? list = todolist : list = donelist;
     childs = list.childNodes;
     p = childs[n].children[1];
     title = p.innerHTML;

     p.innerHTML="<input id='input-"+ n +"' value='"+title+"' />";
     var input = $("input-"+n);
     input.setSelectionRange(0,input.value.length);
     input.focus();
 }
 //修改input成p标签
 function change(n,str){
     var list = null;
     str ==='todolist' ? list = todolist : list = donelist;
     childs = list.childNodes;
     p = childs[n].children[1];
     title = p.children[0].value;
     if(title.length === 0){
         alert("内容不能为空");
     }
     else{
         p.innerHTML = title;
     }
 }
 //删除一个li
 function remove(n,str){
     var list=null;
     if (str==='todolist'){
         list = todolist;
         todoc--;
         todoCount.innerText = todoc;
     } else if(str==='donelist'){
         list = donelist;
         donec--;
         doneCount.innerText = donec;
     }

     childs = list.childNodes;
     for(var i=childs.length-1;i>=0;i--){
         if(i===Number(n)){
             list.removeChild(childs[n]);
         }
     }
     loop(str);
 }
 //删除全部li
 function clear(){
     childs1 = todolist.childNodes;
     for(var i=childs1.length-1;i>=0;i--){
         todolist.removeChild(childs1[i]);
     }
     childs2 = donelist.childNodes;
     for(var j=childs2.length-1;j>=0;j--){
         donelist.removeChild(childs2[j]);
     }
     todoc = 0;
     donec = 0;
     todoCount.innerText = todoc;
     doneCount.innerText = donec;
 }
 //根据id获取
 function $(id){
     return typeof id === 'string' ? document.getElementById(id) : null;
 }

 <!DOCTYPE html>
 <html>
 <head>
     <meta charset="utf-8">
     <title>todolist</title>
     <link rel="stylesheet" type="text/css" href="css/reset.css">
     <link rel="stylesheet" type="text/css" href="css/header.css">
     <link rel="stylesheet" type="text/css" href="css/section.css">
     <link rel="stylesheet" type="text/css" href="css/footer.css">
 </head>
 <body>
     <div class="header">
         <div class="section">
             <h3>ToDolist</h3>
             <input type="text" name="title" placeholder="添加ToDo" id="searchinput">
             <button id="btn" onclick="postaction()">添加</button>
         </div>
     </div>
     <div class="section">
         <h2>
             正在进行
             <span id="todocount">0</span>
         </h2>
         <ul id="todolist"></ul>
         <h2>
             已经完成
             <span id="donecount">0</span>
         </h2>
         <ul id="donelist"></ul>
     </div>
     <div class="footer">

             Copyright © 2019 todolist.cn
             <a href="javascript:clear();">clear</a>
     </div>
     <script type="text/javascript" src="js/index.js"></script>
 </body>
 </html>