效果如下：

　　前端及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. 浅谈log4j-4-不同目的地(转)

    public class DifferentAppender { private static Logger logger=Logger.getLogger(DifferentAppender.cla ...

  2. （转）Redis(四)哨兵_sentinel

    发现一篇文章写的特别的详细,所以在这里转载,记录一下.照着文章中的内容自己动手实践了. 原文地址:http://blog.csdn.net/a67474506/article/details/5043 ...

  3. 【BZOJ1878】【SDOI2009】 HH的项链

    莫队模板题,比较简单 原题: HH有一串由各种漂亮的贝壳组成的项链.HH相信不同的贝壳会带来好运,所以每次散步 完后,他都会随意取出一段贝壳,思考它们所表达的含义.HH不断地收集新的贝壳,因此, 他的 ...

  4. maven项目eclipse目录结构浅析

    maven项目eclipse目录结构浅析 PS:Java Resources是为了方便我们编译,到最后都会编译到   WEB-INF/classes Maven项目的目录结构

  5. 如何取消noarch.rpm包

    有一次部署zabbix服务器,不小心rpm -ivh zabbix的el7版本的rpm了,但是我的系统是centos6.5的,所以就尴尬了 rpm -ivh http://repo.zabbix.co ...

  6. 数据库连接池——C3P0

    定义: 本质上就是个容器(集合)存放数据库连接的容器.当系统初始化以后,容器被创建,容器中就会申请一些连接对象.当用户来访问的数据库的时候,从容器中取连接对象,用户用完之后归还. 使用方法: 标准接口 ...

  7. src-d engine 强大的git 历史分析工具

    src-d engine 包含了Babelfish ,同时可以看作是Babelfish 的升级版本,我们可以使用sql 进行代码分析 备注: 注意运行的时候需要容器支持 使用 安装docker   参 ...

  8. ASP.NET WebApi使用Swagger生成api说明文档

    最近做的项目使用mvc+webapi(非.Net Core),采取前后端分离的方式,后台提供API接口给前端开发人员.这个过程中遇到一个问题后台开发人员怎么提供接口说明文档给前端开发人员,最初打算使用 ...

  9. vue监听路由变化

    使用 watch,观察路由,一旦发生变化便重新获取数据 watch: { // 如果路由有变化,会再次执行该方法 '$route': 'fetchData' }

  10. Gitlab备份与恢复、迁移与升级

    0.Gitlab安装 1.安装和配置必要的依赖关系 在CentOS7,下面的命令将在系统防火墙打开HTTP和SSH访问.   yum install curl openssh-server postf ...