利用原生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中找出搜 ...
随机推荐
- 迭代器和增强型for循环
★迭代器: Java集合框架的集合类,我们有时候称之为容器.容器的种类有很多种,比如ArrayList.LinkedList.HashSet...,每种容器都有自己的特点,ArrayList底层维护的 ...
- 关于宽带接两台路由,并且第二台需要关闭DHCP的设置
关于宽带接两台路由,并且第二台需要关闭DHCP的设置 https://wenku.baidu.com/view/e317a12d4b35eefdc8d333cb?pcf=2#1
- 替换元素（replace,replace_if,replace_copy,replace_copy_if）
replace 审阅range中的每个元素,把old_value替换为new_value template <class ForwardIterator,class T> void rep ...
- MySQL中视图
视图是指计算机数据库中的视图,是一个虚拟表,其内容由查询定义.同真实的表一样,视图包含一系列带有名称的列和行数据.但是,视图并不在数据库中以存储的数据值集形式存在.行和列数据来自由定义视图的查询所引用 ...
- Java参数验证Bean Validation 框架
1.为什么要做参数校验? 参数校验和业务逻辑代码分离,参数校验代码复用,统一参数校验方式.校验不太通过时统一异常描述. 2.bean validation规范 JSR303 规范(Bean Valid ...
- nexus 私有 maven 仓库的搭建
下载地址 页面 : https://help.sonatype.com/repomanager3/download 首先需要安装jdk .安装棒法我 前面的文章有写.https://www.cnblo ...
- 读DataSnap源代码（二）
program Project1; {$APPTYPE GUI} {$R *.dres} uses Vcl.Forms, Web.WebReq, IdHTTPWebBrokerBridge, Form ...
- Hadoop 目录分析及存储机制
NameNode元数据目录分析 在第一次部署好Hadoop集群的时候,我们需要在NameNode(NN)节点上格式化磁盘: $HADOOP_HOME/bin/hdfs namenode -format ...
- hadoop行业技术创新解决方案
如今有很多公司都在努力挖掘他们拥有的大量数据,包括结构化.非结构化.半结构化以及二进制数据等,来探索对数据的深入利用. 大多数公司估计他们只分析了已有数据的12%,剩余88%还没有被充分利用.大量的数 ...
- centos7 svn服务器的搭建
centos7下svn的安装与配置 1.环境 centos7 2.安装svnyum -y install subversion 3.配置 建立版本库目录mkdir /www/svndata svn ...