效果如下：

　　前端及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. Python——scapy模块实现tcp探测目标服务器路由轨迹

      scapy模块的安装 484 yum install tcpdump graphviz ImageMagick -y 485 wget http://www.secdev.org/projects ...

  2. MySQL--NUMA与MySQL

    ============================================================= NUMA(Non-Uniform Memory Access),非一致性内存 ...

  3. Using C++ new() placement in embedded system

    For new(), there are three definition in C++11, which are listed below. throwing (1) void* operator ...

  4. BackgroundWorker Class Sample for Beginners

    Download source - 27.27 KB Introduction This article presents a novice .NET developer to develop a m ...

  5. windows下能搭建php-fpm吗 phpstudy

    这个Windows和Linux系统是不一样的,因为一般nginx搭配php需要php-fpm中间件,但是Windows下需要第三方编译. 下载的包里有php-cgi.exe 但不是php-fpm如果想 ...

  6. FastAdmin 数据库备份插件更新到 v1.0.4

    FastAdmin 数据库备份插件更新到 v1.0.4 下载地址: https://www.fastadmin.net/store/database.html 更新如下: 修复了忽略列表无效的 Bug ...

  7. k8s 的使用

    Kubernetes 是什么:在 Docker 技术的基础上,为容器化的应用提供部署运行.资源调度.服务发现和动态伸缩等一系列完整功能,提高了大规模容器集群管理的便捷性的工具.

  8. dojo：为数据表格添加复选框

    一.添加复选框 此时应该选用EnhancedGrid,而不是普通的DataGrid.添加复选框需要设置EnhancedGrid的plugins属性,如下: gridLayout =[{ default ...

  9. Jmeter之函数助手

    本文转载自:心的开始  Emily0120 JMeter函数是一些能够转化在测试树中取样器或者其他配置元件的域的特殊值.一个函数的调用就像这样:${_functionName(var1,var2,va ...

  10. CodeReview常见代码问题

    路线图 常见代码问题空值未捕获潜在的异常低性能影响范围过大单测问题与原有业务逻辑不兼容缺乏必要日志错误码不符合规范参数检测缺乏或不足引用错误细节错误多重条件文不符实跨语言或跨系统交互可维护性问题硬编码 ...