时间戳

首页 > 技术文章 > ToDoList(原生JS)了解一下

ToDoList(原生JS)了解一下

pandaboy1123 2018-08-24 07:59 原文

<!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: 0;
    padding: 0;
    border: 0;
    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）

 

推荐阅读