效果如下：

　　前端及js代码如下：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>ToDOList</title>
    <link rel="stylesheet" href="todolist.css">
</head>
<body style="background-color: #b0b0b0;margin: 0 auto;">
    <div class="pg-top">
        <label id="l1">ToDoList</label>
        <input id="i1" type="text" placeholder="请输入待办项目"  />
        <input id="i2" type="button" value="确定">
    </div>

    <div class="pg-body">
        <div class="body-middle">
            <div>
                <div>
                    <h2 style="color: yellowgreen">未完成</h2>
                </div>
                <div>
                    <ul id="u1">

                    </ul>
                </div>

            </div>

            <div>
                 <div>
                    <h2 style="color: greenyellow">已完成</h2>
                </div>
                <div>
                    <ul id="u2">

                    </ul>
                </div>
            </div>

        <div class="middle-bottom">
            <button value="清除全部" onclick="clear_all()" >清除全部</button>
        </div>
        </div>
    </div>

    <script>
        flag = false;
        //取值
        var msg = document.getElementById('i1');
        //点击确定的操作
            var sure = document.getElementById('i2');
            sure.onclick = function () {
                //先判断输入不能为空
                if(msg.value === ''){
                    alert('输入不能为空');
                    return
                }
                ul1 = document.getElementById('u1');
                ul2 = document.getElementById('u2');
                //新建一个li
                var li = document.createElement('li');
                //往li里添加内容--innerHTML
                li.innerHTML = '<label>' + msg.value + '</label>' + '<span><button class="b1">删除</button>&nbsp;&nbsp;&nbsp;<button class="b2">完成</button></span>';
                //判断后加入到ul1里面去
                var lis = document.getElementsByTagName('li');
                ul1.appendChild(li);
                //输入完后将输入框的内容清空
                msg.value = '';

                //点击删除对button b1 进行操作~~
                //var as =  document.getElementsByTagName('a');
                var as = document.getElementsByClassName('b1');
                for (var i = 0; i < as.length; i++) {
                    as[i].onclick = function () {
                        //this代表as[i]

                        //判断是哪个ul下的再进行删除操作
                        if (this.parentNode.parentNode.parentNode === ul1) {
                            ul1.removeChild(this.parentNode.parentNode);
                        }
                        else {
                            ul2.removeChild(this.parentNode.parentNode);
                        }
                    }
                }

                //点击完成对button b2 进行操作~
                var as1 = document.getElementsByClassName('b2');
                for (var j = 0; j < as.length; j++) {
                    as1[j].onclick = function () {
                        //将完成的li 添加到ul2中
                        li_u2 = this.parentNode.parentNode;

                        //console.log(li_u2.firstChild);
                        //console.log(li_u2.lastChild.firstChild);
                        //console.log(li_u2.lastChild.firstChild.nextSibling);
                        //console.log(li_u2.lastChild.lastChild);

                        //删除完成那个按钮
                        ll = li_u2.lastChild.lastChild;
                        li_u2.lastChild.removeChild(ll);
                        ul2.appendChild(li_u2);
                    }
                }

            };

        function clear_all() {
            var uu1 = document.getElementById('u1');
            var uu2 = document.getElementById('u2');
            uu1.innerHTML = '';
            uu2.innerHTML = '';
        }

    </script>

</body>
</html>

前端+js

　　css效果如下：

*{
    margin:0;
    padding: 0;
}

button{
    cursor: pointer;
}

label{
    display: block;
}

ul{
    list-style-type: none;
}

.pg-top{
    height:55px;
    width:100%;
    position: fixed;
    color: white;
    background-color: #1d3cb0;
    line-height:55px;
    /*margin-top: -59px;*/
}

.pg-body{
    position: relative;
    width:100%;
}

.body-middle{
    position: absolute;
    left:22%;
    right:22%;
    margin-top:57px;
    width:56%;
    margin-left: auto;
    margin-right: auto;
    background-color: #2b84da;
}

.middle-bottom{
    text-align: center;

}

#l1{
    position: fixed;
    left: 35%;
}

#i1 {
    position: fixed;
    left:40%;
    top:16px;
    width:355px;
    height:19px;
}

#i2 {
    position: fixed;
    left:64%;
    top:16px;
    cursor: pointer;
}

css

利用原生js的Dom操作实现简单的ToDoList的效果的更多相关文章

  1. 抛开jQuery，拾起原生JS的DOM操作

    常用的JS-DOM操作与jQuery的对比 jQuery用多了,还是需要来熟练熟练原生JS的操作,不然写JS都快离不开jQuery了 目录 1. 获取DOM 2. 创建DOM 3. 添加DOM 4. ...

  2. 原生js封装dom操作库

    var utils = (function(window) { var flag = "getComputedStyle" in window; function win(attr ...

  3. 原生js的dom操作

    父节点parentNode 第一个子节点 只会获取到元素节点 firstElementChild ★★★★★    ​ 第一个子节点 (如果有文本节点将会获取到文本节点) firstChild ​ 最 ...

  4. 整理一下原生js的dom操作

    获取元素 getElementById() getElementsByClass() getElementsByTagName getElementsByName node属性 前.后.父.子 pre ...

  5. js的dom操作（整理）（转）

    js的dom操作整理(整理)(转) 一.总结 一句话总结: dom操作有用原生js的dom操作,也可以用对js封装过的jquery等插件来来更加方便的进行dom操作 1.dom是什么? 对于JavaS ...

  6. js的DOM操作整理（整理）

    js的DOM操作整理(整理) 一.总结 一句话总结: dom操作有用原生js的dom操作,也可以用对js封装过的jquery等插件来更加方便的进行dom操作 1.dom是什么? 对于JavaScrip ...

  7. 原生JS和jQuery操作DOM的区别小结

    一.Js原生对象和jQuery实例对象的相互转化: (1).原生JS对象转JQ对象: $(DOM对象); (2). JQ对象转原生JS对象: $(DOM对象).get(index); //注意区分eq ...

  8. JS的DOM操作 - 你真的了解吗?

    摘要 想稍微系统的说说对于DOM的操作,把Javascript和jQuery常用操作DOM的内容归纳成思维导图方便阅读,同时加入性能上的一些问题. 前言 在前端开发的过程中,javascript极为重 ...

  9. 利用原生JS实现类似浏览器查找高亮功能(转载）

    利用原生JS实现类似浏览器查找高亮功能 在完成 Navify 时,增加一个类似浏览器ctrl+f查找并该高亮的功能,在此进行一点总结: 需求 在.content中有许多.box,需要在.box中找出搜 ...

随机推荐

  1. js---通配符选择器

    原味转自:http://blog.sina.com.cn/s/blog_6e001be701017kaz.html 1.选择器 (1)通配符: $("input[id^='code']&qu ...

  2. js实现一条抛物线

    抛物线运动解释: 以右开口为例,根据公式  y^2 = 2px .确定p的值,已知x求y. <!DOCTYPE html> <html> <head> <me ...

  3. ionic1页面间传递参数的问题

    1.  $scope.routeinfo是我要传递的参数--到scheddulcontent这个页面去: $state.go( "scheddulcontent" , { 'rou ...

  4. WikiBooks/Cg Programming

    https://en.wikibooks.org/wiki/Cg_Programming Basics Minimal Shader(about shaders, materials, and gam ...

  5. 解决jpgraph在php7.0版本下时，无法显示例子图表的问题

    解决gpgraph4.02在php7.0显示空白框问题 Gpgraph类库强大的绘制图表的功能深受广大phper的喜爱,目前官方最新的版本是 jpgraph-4.0.2 ,适用于php5.0及7.0以 ...

  6. MongoDB索引的种类与使用

    一:索引的种类 1:_id索引:是绝大多数集合默认建立的索引,对于每个插入的数据,MongoDB都会自动生成一条唯一的_id字段2:单键索引: 1.单键索引是最普通的索引 2.与_id索引不同,单键索 ...

  7. Day 03 基本数据类型

    一.基本数据类型的使用 1.为何区分数据类型? 答:数据类型指的是变量值的类型,变量值之所以区分类型,是因为变量值用来记录事物状态的,而事物的状态有不同的种类,对应着也必须使用不同类型的值去记录. 整 ...

  8. Scrapy 爬虫日志中出现Forbidden by robots.txt

    爬取汽车之家数据的时候,日志中一直没有任何报错,开始一直不知道什么原因导致的,后来细细阅读了下日志发现日志提示“Forbidden by robots.txt”,Scrapy 设置文件中如果把ROBO ...

  9. MySQL 过滤数据（WHERE子句）

    WHERE子句操作符 从表products中检索prod_name,prod_price列,返回prod_price=2.5的行 mysql> SELECT  prod_name, prod_p ...

  10. alias 创建别名

    在我们的"/home/用户名/"的目录下,会有一个“.bashrc”文件,修改步骤如下: 在文件的末尾添加: alias 想要的别名=文件路径(文件路劲加引号)例如:alias p ...