<!DOCTYPE html>

<html lang="en">

<head>

    <meta charset="UTF-8">

    <title>ToDoList—最简单的待办事项列表</title>

    <link rel="shortcut icon" href="../img/panda.ico">

    <link rel="stylesheet" href="../CSS/reset.css">

    <link rel="stylesheet" href="../CSS/ToDoList.css">

    <link rel="stylesheet" href="../CSS/font-awesome/web-fonts-with-css/css/fontawesome-all.min.css" >

</head>

<body onload="count();countOut()">

<header>

    <section>

        <form action="javascript:readInput()" id = 'form'>

            <label>ToDoList</label>

            <input placeholder="添加todo" id="todo"/>

        </form>

    </section>

</header>

<section id="s1">

    <h2>正在进行

        <span id="countInID">

            0

        </span>

        <ol id="in">

        </ol>

    </h2>

    <h2>已经完成

        <span id="countOutID">

            0

        </span>

        <ol id="out">

        </ol>

    </h2>

</section>

<footer>

            Copyright © 2018 todolist.cn

    <a href="javascript:clear()">clear</a>

</footer>

<script type="text/javascript" src="../JS/ToDoList.js"></script>

</body>

</html>

ToDoList.html

html{

    display: block;

}

head{

    display: none;

}

body{

    font-size: 16px;

    background: #CDCDCD;

    font-family: "Helvetica Neue",Helvetica,Arial,"Microsoft Yahei","Hiragino Sans GB","Heiti SC","WenQuanYi Micro Hei",sans-serif;

}

header{

    background: #333333;

    width: 100%;

    height: 50px;

}

section{

    padding: 0 10px;

    width: 600px;

    margin: 0 auto;

}

label{

    float: left;

    width: 100px;

    line-height: 50px;

    color: #DDD;

    font-size: 24px;

    cursor: pointer;

}

input{

    float: right;

    width: 60%;

    height: 24px;

    margin-top: 12px;

    text-indent: 10px;

    border-radius: 5px;

    box-shadow: 0 1px 0 rgba(255,255,255,0.24), 0 1px 6px rgba(0,0,0,0.45) inset;

    border: none;

}

footer{

    color: #666;

    font-size: 14px;

    text-align: center;

}

footer a{

    text-decoration: none;

    color: white;

}

footer a:hover{

    border: 1px solid red;

    color: red;

    font-size: 18px;

}

h2{

    margin-top: 20px;

    position: relative;

}

span{

    position: absolute;

    top: 2px;

    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;

}

ol{

    list-style-type: none;

}

ol input{

    position: absolute;

    top: 1px;

    left: 10px;

    width: 24px;

    height: 24px;

    cursor: pointer;

    margin: 3px 3px 3px 4px;

}

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);

    cursor: move;

}

li p{

    line-height: 32px;

    margin-left: 5px;

}

a{

    text-decoration: none;

    color: #333333;

}

li a{

    position: absolute;

    top: 2px;

    right: 5px;

    display: inline-block;

    width: 30px;

    height: 30px;

    line-height: 14px;

    text-align: center;

    font-weight: bold;

    font-size: 14px;

    cursor: pointer;

}

li a i{

    margin: 0 auto;

    font-size: 25px;

}

#out input{

}

ToDoList.css

/* http://meyerweb.com/eric/tools/css/reset/

   v2.0 | 20110126

   License: none (public domain)

*/

html, body, div, span, applet, object, iframe,

h1, h2, h3, h4, h5, h6, p, blockquote, pre,

a, abbr, acronym, address, big, cite, code,

del, dfn, em, img, ins, kbd, q, s, samp,

small, strike, strong, sub, sup, tt, var,

b, u, i, center,

dl, dt, dd, ol, ul, li,

fieldset, form, label, legend,

table, caption, tbody, tfoot, thead, tr, th, td,

article, aside, canvas, details, embed,

figure, figcaption, footer, header, hgroup,

menu, nav, output, ruby, section, summary,

time, mark, audio, video {

    margin:;

    padding:;

    border:;

    vertical-align: baseline;

}

body{

    font: 14px/1.5 "Helvetica Neue",Helvetica,Arial,"Microsoft Yahei","Hiragino Sans GB","Heiti SC","WenQuanYi Micro Hei",sans-serif;

    color: #333;

    background-color: #fff;

    min-width: 1226px

}

reset.css

function readInput() {

    var text = document.getElementById('todo');

    var form = document.getElementById('form');

    if(text.value.trim() ===''){

         alert('输入内容不能为空！');

         form.reset();

    }else{

        add();

        form.reset();

    }

}

//增加记录

function add() {

    var textIn = document.getElementById('todo').value;

    var inLiHtml = document.getElementById('in').getElementsByTagName('li');

    if(inLiHtml.length ===0){

    //    没有记录就新增记录

        var i =0;

        document.getElementById('in').innerHTML = "<li id=\"in-queue-"+i+"\">\n" +

            "                <input type=\"checkbox\" onclick='check(this)' id='in"+i+"'/>\n" +

            "                <p>"+textIn+"</p>\n" +

            "                <a href=\"#\" onclick=\"del(this.id)\" id='ai"+i+"'>\n" +

            "                    <i class=\"far fa-trash-alt\"></i>\n" +

            "                </a>\n" +

            "            </li>";

        count();

    }else {

    //    有记录就先拿到所有的li标签个数，增加一个

        var liNum = inLiHtml.length;

        var liNumP = liNum+1;

        var data = document.getElementById('in').innerHTML;

        var node = '';

        // node.setAttribute('id',"in-queue-"+liNumP);

        node = "<li id=\"in-queue-"+liNumP+"\">\n" +

            "                <input type=\"checkbox\" onclick='check(this)' id='in"+liNumP+"'/>\n" +

            "                <p>"+textIn+"</p>\n" +

            "                <a href=\"#\" onclick=\"del(this.id)\" id='ai"+liNumP+"'>\n" +

            "                    <i class=\"far fa-trash-alt\"></i>\n" +

            "                </a>\n" +

            "            </li>";

        node += data;

        document.getElementById('in').innerHTML = node;

        count();

    }

}

// 统计新增记录数

function count() {

    var countMsg = 0;

    var countRealMsg = document.getElementById('in').getElementsByTagName('li').length;

    if(countRealMsg>0){

        document.getElementById('countInID').innerText = countRealMsg;

    }else{

         document.getElementById('countInID').innerText = countMsg;

    }

}

// 统计完成的记录数

function countOut() {

    var countMsg = 0;

    var countRealMsg = document.getElementById('out').getElementsByTagName('li').length;

    if(countRealMsg>0){

        document.getElementById('countOutID').innerText = countRealMsg;

    }else{

         document.getElementById('countOutID').innerText = countMsg;

    }

}

// 清除记录

function clear() {

    document.getElementById('s1').innerHTML = "<h2>正在进行\n" +

        "        <span id=\"countInID\">\n" +

        "            0\n" +

        "        </span>\n" +

        "        <ol id=\"in\">\n" +

        "\n" +

        "        </ol>\n" +

        "    </h2>\n" +

        "    <h2>已经完成\n" +

        "        <span id=\"countOutID\">\n" +

        "            0\n" +

        "        </span>\n" +

        "        <ol id=\"out\">\n" +

        "\n" +

        "        </ol>\n" +

        "    </h2>";

    count();

    countOut();

}

// 删除选中记录

function del(idNum) {

    var reID = /[a-z][a-z]/.exec(idNum);

    var newIdNum = idNum.replace(/[^0-9]/ig,"");

    var newID = '';

    if(reID =='ai' || reID=='in'){

          newID = "in-queue-"+newIdNum;

    }else if(reID =='ao' || reID == 'ou'){

          newID = "out-queue-"+newIdNum;

    }

    var data = document.getElementById(newID);

    data.parentNode.removeChild(data);

    count();

    countOut();

}

//分组，选中的checkbox移动到完成项

function check(idNum) {

   var cID = idNum.id;

   var newID = cID;

   var choose = document.getElementById(cID).checked;

   if (choose===true){

       var node = '';

       var data1 = document.getElementById(cID).parentNode.innerHTML;

       var data = document.getElementById('out').innerHTML;

       var num = /\d+/.exec(data1);

       var pText = document.getElementById(cID).parentNode.innerText;

       del(newID);

       node = "<li id=\"out-queue-"+num+"\">\n" +

           "                <input type=\"checkbox\" onclick=\"check(this)\" id=\"out"+num+"\" checked=\"checked\"/>\n" +

           "                <p>"+pText+"</p>\n" +

           "                <a href=\"#\" onclick=\"del(this.id)\" id=\"ao"+num+"\">\n" +

           "                    <i class=\"far fa-trash-alt\"></i>\n" +

           "                </a>\n" +

           "            </li>";

       node += data;

       document.getElementById('out').innerHTML = node;

       count();

       countOut();

   }else if(choose===false){

       var node2 = '';

       var data12 = document.getElementById(cID).parentNode.innerHTML;

       var data2 = document.getElementById('in').innerHTML;

       var num2 = /\d+/.exec(data12);

       var pText2 = document.getElementById(cID).parentNode.innerText;

       del(newID);

       node2 = "<li id=\"in-queue-"+num2+"\">\n" +

           "                <input type=\"checkbox\" onclick=\"check(this)\" id=\"in"+num2+"\" />\n" +

           "                <p>"+pText2+"</p>\n" +

           "                <a href=\"#\" onclick=\"del(this.id)\" id=\"ai"+num2+"\">\n" +

           "                    <i class=\"far fa-trash-alt\"></i>\n" +

           "                </a>\n" +

           "            </li>";

       node2 += data2;

       document.getElementById('in').innerHTML = node2;

       count();

       countOut();

   }

}

ToDoList.js

1.将用户输入添加至代办项 OK

2.可以对todolist进行分类（支持正反选） OK

3.todilist的每一项可删除和编辑（仅可删除，p标签内内容未实现可以编辑） NO

4.下方有clear按钮，清空所有todolist项 OK

PS：5.未实现数据的持久化，不能将数据保存至本地

    6.语法结构待优化，基本功能实现，但是JS代码冗余

先读我

1.将用户输入添加至代办项 OK

2.可以对todolist进行分类（支持正反选） OK  

3.todilist的每一项可删除和编辑（仅可删除，p标签内内容未实现可以编辑） NO  其实用户点击区域变成input就可以编辑了

4.下方有clear按钮，清空所有todolist项 OK

PS：5.未实现数据的持久化，不能将数据保存至本地  /作业没要求

    6.语法结构待优化，基本功能实现，但是JS代码冗余  /其实可以使用jquery，原生js也可以就是写起来繁琐。

1-4 85分 编辑未完成扣10分

代码清晰简洁,结构紧凑，代码变量和函数命名规范，可读性好，加10分

 var choose = document.getElementById(cID).checked;

   if (choose===true){}

else if(choose===false)

完全可以用 if(choose);else if(!choose)代替，没见过布尔值还可以用===来匹配的........

导师点评

项目结构（自行引入font-awesome）

最新文章

  1. Android-adb指令
  2. mongoperf用法
  3. jqueryGannt用法
  4. [HDOJ5445]Food Problem(优先队列优化多重背包)
  5. sql 、linq、lambda 总结
  6. [转]Spring的IOC原理[通俗解释一下]
  7. apiCloud结合layer实现动态数据弹出层
  8. OpenCV白平衡算法之灰度世界法（消除RGB受光照影响）
  9. Qemu文档
  10. 如何使用Jquery获取Form表单中被选中的radio值
  11. ZOJ 3820 Building Fire Stations
  12. Palindrome 回文数
  13. Python函数篇：dict函数和列表生成式
  14. K：java序列化与反序列化—transient关键字的使用
  15. nginx常用场景
  16. 百度网盘免VIP全速下载！
  17. Android studio 在一个项目上添加另一个项目，引用其内部参数
  18. unity操作Hierarchy视图下同名的对象
  19. Win10系列：VC++绘制几何图形4
  20. C# 中使用面向切面编程（AOP）中实践代码整洁（转）

热门文章

  1. 【codeforces 793A】Oleg and shares
  2. HDU4569 Special equations
  3. 神奇的JAVA多态
  4. 断路器-Hystrix的深入了解
  5. innodb_max_purge_lag
  6. android 软键盘的显示与隐藏问题的研究
  7. POJ 3905
  8. 单片机project师必备的知识
  9. DataGridView导出数据到Excel及单元格格式的改动
  10. hdoj--1068--Girls and Boys（最大独立集）