ToDoList(原生JS)了解一下

<!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）

ToDoList(原生JS)了解一下的更多相关文章

原生JS封装Ajax插件(同域&&jsonp跨域)
抛出一个问题,其实所谓的熟悉原生JS,怎样的程度才是熟悉呢? 最近都在做原生JS熟悉的练习... 用原生Js封装了一个Ajax插件,引入一般的项目,传传数据,感觉还是可行的...简单说说思路,如有不正 ...
常用原生JS方法总结（兼容性写法）
经常会用到原生JS来写前端...但是原生JS的一些方法在适应各个浏览器的时候写法有的也不怎么一样的... 今天下班有点累... 就来总结一下简单的东西吧…… 备注:一下的方法都是包裹在一个EventU ...
原生JS实现"旋转木马"效果的图片轮播插件
一.写在最前面最近都忙一些杂七杂八的事情,复习软考.研读经典...好像都好久没写过博客了... 我自己写过三个图片轮播,一个是简单的原生JS实现的,没有什么动画效果的,一个是结合JQuery实现的, ...
再谈React.js实现原生js拖拽效果
前几天写的那个拖拽,自己留下的疑问...这次在热心博友的提示下又修正了一些小小的bug,也加了拖拽的边缘检测部分...就再聊聊拖拽吧一.不要直接操作dom元素 react中使用了虚拟dom的概念,目 ...
React.js实现原生js拖拽效果及思考
一.起因&思路不知不觉,已经好几天没写博客了...近来除了研究React,还做了公司官网... 一直想写一个原生js拖拽效果,又加上近来学react学得比较嗨.所以就用react来实现这个拖 ...
原生JS实现全屏切换以及导航栏滑动隐藏及显示——重构前
思路分析: 向后滚动鼠标滚轮,页面向下全屏切换:向前滚动滚轮,页面向上全屏切换.切换过程为动画效果. 第一屏时,导航栏固定在页面顶部,切换到第二屏时,导航条向左滑动隐藏.切换回第一屏时,导航栏向右滑动 ...
原生js实现autocomplete插件
在实际的项目中,能用别人写好的插件实现相关功能是最好不过,为了节约时间成本,因为有的项目比较紧急,没充分时间让你自己来写,即便写了,你还要花大量时间调试兼容性.但是出于学习的目的,你可以利用闲暇时间, ...
原生js封装ajax：传json，str，excel文件上传表单提交
由于项目中需要在提交ajax前设置header信息,jquery的ajax实现不了,我们自己封装几个常用的ajax方法. jQuery的ajax普通封装 var ajaxFn = function(u ...
原生JS实现购物车结算功能代码+zepto版
html <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3 ...

随机推荐

Bootstrap关于排版
1.Bootstrap和普通的HTML页面一样,定义标题都是使用标签<h1>到<h6>,只不过Bootstrap覆盖了其默认的样式 2.使用了<small>标签来制 ...
Nexus私服的搭建
1.nexus 介绍是开源的,用该框架架设maven私有服务器 2.nexus私服环境搭建把nexus.war包放到tomcat的webapps下面浏览且登录 ...
fzu 2132
#include<stdio.h> double h; double tt; void s(long long m,long long n) { long long i,j,sum; j= ...
/tmp目录下执行脚本失败提示Permission denied
Linux上执行Shell脚本运行失败提示Permission denied一个问题,挺好的问题,切中了知识盲点. 问题现象 Shell脚本在/tmp目录下,执行./test.sh运行失败,提示Per ...
Spring MVC-概述（转载实践）
以下内容翻译自:https://www.tutorialspoint.com/springmvc/springmvc_overview.htm 说明:示例基于Spring MVC 4.1.6. Spr ...
Android获取设备屏幕宽高像素值的两个方法
private void get1() { Resources resources = this.getResources(); DisplayMetrics dm = resources.getDi ...
session_start() [function.session-start]:
我在学习PHP的,当我尝试做在session_start() - 获取有关错误信息不能发送会话cookie. 我看到在这个问题上前面的问题,可是,仍然不能确定我的错误. 假设是错误家伙? <? ...
50套html站点模板，涵盖非常多行业，各种类型html站点，各种行业html站点模板下载
50套html站点模板,涵盖非常多行业,各种类型html站点.各种行业html站点模板下载所以模板都在共享文件中面QQ群 139639813 ,快下载吧.
Ext.TabPanel中的items具体解释
Ext.TabPanel中的items: (来自项目源代码中的items条目代码) items:{ id:"opt1", title:"默认页面", tabTi ...
C# SortedDictionary<TKey, TValue> 类
表示依据键进行排序的键/值对的集合. https://msdn.microsoft.com/zh-cn/library/f7fta44c.aspx

ToDoList(原生JS)了解一下

ToDoList(原生JS)了解一下的更多相关文章

随机推荐

热门专题