利用原生js的Dom操作实现简单的ToDoList的效果
效果如下:
前端及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> <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的效果的更多相关文章
- 抛开jQuery,拾起原生JS的DOM操作
常用的JS-DOM操作与jQuery的对比 jQuery用多了,还是需要来熟练熟练原生JS的操作,不然写JS都快离不开jQuery了 目录 1. 获取DOM 2. 创建DOM 3. 添加DOM 4. ...
- 原生js封装dom操作库
var utils = (function(window) { var flag = "getComputedStyle" in window; function win(attr ...
- 原生js的dom操作
父节点parentNode 第一个子节点 只会获取到元素节点 firstElementChild ★★★★★ 第一个子节点 (如果有文本节点将会获取到文本节点) firstChild 最 ...
- 整理一下原生js的dom操作
获取元素 getElementById() getElementsByClass() getElementsByTagName getElementsByName node属性 前.后.父.子 pre ...
- js的dom操作(整理)(转)
js的dom操作整理(整理)(转) 一.总结 一句话总结: dom操作有用原生js的dom操作,也可以用对js封装过的jquery等插件来来更加方便的进行dom操作 1.dom是什么? 对于JavaS ...
- js的DOM操作整理(整理)
js的DOM操作整理(整理) 一.总结 一句话总结: dom操作有用原生js的dom操作,也可以用对js封装过的jquery等插件来更加方便的进行dom操作 1.dom是什么? 对于JavaScrip ...
- 原生JS和jQuery操作DOM的区别小结
一.Js原生对象和jQuery实例对象的相互转化: (1).原生JS对象转JQ对象: $(DOM对象); (2). JQ对象转原生JS对象: $(DOM对象).get(index); //注意区分eq ...
- JS的DOM操作 - 你真的了解吗?
摘要 想稍微系统的说说对于DOM的操作,把Javascript和jQuery常用操作DOM的内容归纳成思维导图方便阅读,同时加入性能上的一些问题. 前言 在前端开发的过程中,javascript极为重 ...
- 利用原生JS实现类似浏览器查找高亮功能(转载)
利用原生JS实现类似浏览器查找高亮功能 在完成 Navify 时,增加一个类似浏览器ctrl+f查找并该高亮的功能,在此进行一点总结: 需求 在.content中有许多.box,需要在.box中找出搜 ...
随机推荐
- hdu2255 奔小康赚大钱 二分图最佳匹配--KM算法
传说在遥远的地方有一个非常富裕的村落,有一天,村长决定进行制度改革:重新分配房子.这可是一件大事,关系到人民的住房问题啊.村里共有n间房间,刚好有n家老百姓,考虑到每家都要有房住(如果有老百姓没房子住 ...
- IDEA 热部署- 自动编译设置
原文:https://www.cnblogs.com/TechSnail/p/7690829.html && https://blog.csdn.net/qq_3129357 ...
- linux日志管理
//有关当前登录用户的信息记录在文件utmp中 //登录进入和退出纪录在文件wtmp中 [root@bogon python]# who //who命令查询utmp文件并报告当前登录的每个用户 /va ...
- Android命令行工具学习总结
15.setting命令 setting命令可以很方便的更改系统设置中的参数(如修改系统默认输入法) 安卓Settings模块浅析:https://www.jianshu.com/p/ed8508fe ...
- VS打包项目详细解析
使用VS打包项目,其实很多简单.微软官方文档很详尽,故不再细述,只列出相关链接 1创建安装项目 如何:创建或添加部署项目 2 添加项目输出 如何:向部署项目中添加项 3添加用户界面 部署中的用户 ...
- jmeter一些插件下载网址
JSONPathExtractor的插件下载 https://jmeter-plugins.org/wiki/JSONPathExtractor/
- dojo:如何用MultiSelect实现类似ListBox风格的FromTo功能
欲实现的功能如下图: 主要要解决的问题包括两个方面: 一个是MultiSelet初始化的工作,一个是FromTo功能按钮的实现.这主要是因为MultiSelect控件是存储无关的,并不像Select或 ...
- Spring Cloud Eureka Server使用(注册中心)
一.Spring Cloud Eureka 基于Netflix Eureka做了二次封装 由两个组件组成 Eureka Server 注册中心, 供服务注册的服务器 Eureka Client 服务注 ...
- Hive函数以及自定义函数讲解(UDF)
Hive函数介绍HQL内嵌函数只有195个函数(包括操作符,使用命令show functions查看),基本能够胜任基本的hive开发,但是当有较为复杂的需求的时候,可能需要进行定制的HQL函数开发. ...
- 【java】类的初识
面向过程思想:强调的是功能行为 面向对象思想:不自己亲自做,将功能封装为对象,强调具备功能的对象,指挥对象实现各种功能.以后开发实际就是找对象使用对象,要是对象没有就创建对象并维护对象. 面向对象的三 ...