效果如下：

　　前端及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. 在Java中，以下关于方法重载和方法重写描述正确的是？

    public class TTTTT extends SuperC{ public String get(){ return null; } } class SuperC{ Object get(){ ...

  2. eclipse操作（备忘）

    myecplise破解   https://blog.csdn.net/by_xiaobai007/article/details/81177367 1.查看类路径 2.建立模板 window--pr ...

  3. Axure RP chrome插件显示已损坏或者无法安装的解决方法

    http://www.cnplugins.com/zhuanti/arux-rp-bug.html 1.Axure RP chrome插件无法安装的解决方法. 首先Axure RP chrome插件的 ...

  4. MySQL--批量插入导致自增跳号问题

    对于批量插入数据的操作,MySQL申请自增的策略为: 在批量插入语句执行过程中,申请策略: .第一次申请自增值时,会分配1个 .在N次申请自增值时,会分配上一次(第N-1次)的2倍. 测试Demo: ...

  5. sqler sql 转rest api 的docker 镜像构建（续）使用源码编译

    sqler 在社区的响应还是很不错的,已经添加了好多数据库的连接,就在早上项目的包管理还没有写明确, 下午就已经有go mod 构建的支持了,同时也调整下docker 镜像的构建,直接使用git cl ...

  6. linux下PHP手动添加扩展库

    1.进入php源程序目录中的ext目录中,这里存放着各个扩展模块的源代码,选择你需要的模块,比如curl模块: cd curl 执行phpize生成编译文件,phpize在PHP安装目录的bin目录下 ...

  7. 20165308 学习基础和C语言基础调查

    学习基础和C语言基础调查 技能学习 我认为给学生具体的, 能实践的, 能马上看到因果关系的教材和练习, 是激发学生兴趣, 好奇心, 求知欲的好方法. -- 引用自<做中学> 老师博客中注重 ...

  8. Web 单点登录（SSO） 实现模型

    有网友问起, 前后端分离 架构下的  Web 单点验证 怎么做, 我画了个图 : Temp Token  就 相当于 短信验证码 . Web 单点登录 都可以用这个 模型, 不仅仅是 前后端分离 .

  9. nginx下js文件修改后访问不更新问题解决

    今天遇到一个问题,nginx下js修改后不更新,加版本号,刷新浏览器缓存都不行,重启服务器才行,修改后又不更新了而且加载的js文件会有乱码或者文件加载不全的问题. 解决办法:修改nginx.conf, ...

  10. 3、eclipse集成svn

    手动安装 1.从官网下载适合自己开发工具的site-.zip文件,网址是:subclipse.tigris.org,2.从中解压出features与plugins文件夹,复制到eclipse的目录my ...