JavaScript实例 ODO List分析


Posted in Javascript onJanuary 22, 2022

一、实例代码

HTML

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
  <style>

  </style>
</head>

<body>
  <div id="myDIV" class="header">
    <h2 style="margin:5px">My To Do List</h2>
    <input type="text" id="myInput" placeholder="Title...">
    <span onclick="newElement()" class="addBtn">Add</span>
  </div>
  
  <ul id="myUL">
    <li>Hit the gym</li>
    <li class="checked">Pay bills</li>
    <li>Meet George</li>
    <li>Buy eggs</li>
    <li>Read a book</li>
    <li>Organize office</li>
  </ul>
  <script>

  </script>
</body>
</html>

CSS

body {
  margin: 0;/*清除默认外边距*/
  min-width: 250px;/*设置一个最小宽度*/
}

* {
  box-sizing: border-box;/*采用怪异盒模型*/
}


ul {/*清除默认内外边距*/
  margin: 0;
  padding: 0;
}


ul li {
  
  cursor: pointer;/*鼠标移上时变成手*/
  position: relative;/*相对于父级元素进行定位*/
  padding: 12px 8px 12px 40px;/*内边距*/
  background: #eee;/*背景颜色*/
  font-size: 18px;/*文字大小*/
  transition: 0.2s;
  
  /*下面四个是一个意思,使元素及子元素的文本不可选中*/
  -webkit-user-select: none;
  -moz-user-select: none;
  -ms-user-select: none;
  user-select: none;
}


ul li:nth-child(odd) {/*odd是奇数,这里是为了把奇偶项的背景颜色不同*/
  background: #f9f9f9;
}


ul li:hover {/*鼠标移上的项变色*/
  background: #ddd;
}


ul li.checked {/*已经做完的项*/
  background: #888;/*背景颜色*/
  color: #fff;/*文本颜色*/
  text-decoration: line-through;/*删除线*/
}


ul li.checked::before {/*伪元素*/
  content: '';/*不写内容伪元素无法生效*/
  position: absolute;/*绝对定位,定位依据是li*/
  border-color: #fff;/*边框颜色*/
  border-style: solid;/*边框风格*/
  border-width: 0 2px 2px 0;/*边框宽度*/
  top: 10px;/*顶部*/
  left: 16px;/*左边*/
  transform: rotate(45deg);/*旋转,形成√*/
  height: 15px;/*高度*/
  width: 7px;/*宽度*/
}

.close {
  position: absolute;/*绝对定位*/
  /*移动到最*/
  right: 0;
  top: 0;
  padding: 12px 16px 12px 16px;/*内边距*/
}

.close:hover {/*鼠标移上去的时候*/
  background-color: #f44336;/*背景颜色*/
  color: white;/*对勾的颜色*/
}


.header {/*定义标题样式*/
  background-color: #f44336;/*背景颜色*/
  padding: 30px 40px;/*内边距*/
  color: white;/*文字颜色*/
  text-align: center;/*文字水平居中*/
}


.header:after {
  content: "";
  display: table;
  clear: both;
}


input {
  border: none;/*清除默认边框样式*/
  width: 75%;/*宽度为父级的75%*/
  padding: 10px;/*内边距*/
  float: left;/*左浮动*/
  font-size: 16px;/*字体大小*/
}


.addBtn {/*定义添加按钮样式*/
  padding: 9px;
  width: 25%;
  background: #d9d9d9;
  color: #555;
  float: left;
  text-align: center;
  font-size: 16px;
  cursor: pointer;/*鼠标变成手*/
  transition: 0.3s;
}


.addBtn:hover {
  background-color: #bbb;/*鼠标移上时*/
} 

JavaScript

// Create a "close" button and append it to each list item
var myNodelist = document.getElementsByTagName("LI");
var i;
for (i = 0; i < myNodelist.length; i++) {
  var span = document.createElement("SPAN");
  var txt = document.createTextNode("\u00D7");
  span.className = "close";
  span.appendChild(txt);
  myNodelist[i].appendChild(span);
}

// Click on a close button to hide the current list item
var close = document.getElementsByClassName("close");
var i;
for (i = 0; i < close.length; i++) {
  close[i].onclick = function() {
    var div = this.parentElement;
    div.style.display = "none";
  }
}

// Add a "checked" symbol when clicking on a list item
var list = document.querySelector('ul');
list.addEventListener('click', function(ev) {
  if (ev.target.tagName === 'LI') {
    ev.target.classList.toggle('checked');
  }
}, false);

// Create a new list item when clicking on the "Add" button
function newElement() {
  var li = document.createElement("li");
  var inputValue = document.getElementById("myInput").value;
  var t = document.createTextNode(inputValue);
  li.appendChild(t);
  if (inputValue === '') {
    alert("You must write something!");
  } else {
    document.getElementById("myUL").appendChild(li);
  }
  document.getElementById("myInput").value = "";

  var span = document.createElement("SPAN");
  var txt = document.createTextNode("\u00D7");
  span.className = "close";
  span.appendChild(txt);
  li.appendChild(span);

  for (i = 0; i < close.length; i++) {
    close[i].onclick = function() {
      var div = this.parentElement;
      div.style.display = "none";
    }
  }
}

二、实例演示

页面加载后显示TODO List的页面

JavaScript实例 ODO List分析

点击可以把列表的某一项会自动用删除线标识,表示事情已经做完了

JavaScript实例 ODO List分析

点击每一项的最右边有删除事项的“叉叉”,点击可以删除事项

JavaScript实例 ODO List分析

最后在最上方的输入框输入事项的内容,然后点击右侧的Add按钮,可以把事项内容增加到下方列表中

JavaScript实例 ODO List分析

点击Add按钮后

JavaScript实例 ODO List分析

事项添加成功

三、实例剖析

var myNodelist = document.getElementsByTagName("LI");
var i;
for (i = 0; i < myNodelist.length; i++) {
  var span = document.createElement("SPAN");
  var txt = document.createTextNode("\u00D7");
  span.className = "close";
  span.appendChild(txt);
  myNodelist[i].appendChild(span);
}

这一部分是加载页面之后,在列表每一个事项的最后生成一个’×’的图标,用于提示用户可以点击删除

要注意: ’\u00D7’是Unicode编码,代表的就是’x’这个符号

var close = document.getElementsByClassName("close");
var i;
for (i = 0; i < close.length; i++) {
  close[i].onclick = function() {
    var div = this.parentElement;
    div.style.display = "none";
  }
}

这部分先获取类名为close的dom元素,同时也是’x’那个元素,获取到元素集合后,做一个循环,给每一个元素的onclick属性绑定函数

close[i].onclick = function() {
    var div = this.parentElement;
    div.style.display = "none";
}

如果有点击动作,则直接通过修改display来使事项隐藏,在用户看来就是直接将事项删除了

var list = document.querySelector('ul');
list.addEventListener('click', function(ev) {
  if (ev.target.tagName === 'LI') {
    ev.target.classList.toggle('checked');
  }
}, false);

这一部分是实现当用户点击某个事项时,给相应的被点击的事项添加’checked’类名来改变相应的样式

function newElement() {
  var li = document.createElement("li");
  var inputValue = document.getElementById("myInput").value;
  var t = document.createTextNode(inputValue);
  li.appendChild(t);
  if (inputValue === '') {
    alert("You must write something!");
  } else {
    document.getElementById("myUL").appendChild(li);
  }
  document.getElementById("myInput").value = "";
}

最后这一部分是添加新的事项,首先Add按钮的onclick属性绑定newElement()函数,点击Add之后执行newElement函数,生成新的li标签,并且把输入框内的内容也作为li标签的文本,生成之后添加到列表最下面

var span = document.createElement("SPAN");
  var txt = document.createTextNode("\u00D7");
  span.className = "close";
  span.appendChild(txt);
  li.appendChild(span);

  for (i = 0; i < close.length; i++) {
    close[i].onclick = function() {
      var div = this.parentElement;
      div.style.display = "none";
    }
  }

创建新的li标签后,需要配套的给新的li标签的最后面也添加一个’x’符号,并且给onclick属性绑定上函数

到此这篇关于JavaScript实例 ODO List分析的文章就介绍到这了,更多相关 ODO List分析内容请搜索三水点靠木以前的文章或继续浏览下面的相关文章希望大家以后多多支持三水点靠木!

Javascript 相关文章推荐
js键盘事件的keyCode
Jul 29 Javascript
JavaScript中对DOM节点的访问、创建、修改、删除
Nov 16 Javascript
Bootstrap CSS组件之导航(nav)
Dec 17 Javascript
jQuery代码实现实时获取时间
Jan 29 Javascript
JavaScript制作简单的框选图表
May 15 Javascript
Jquery EasyUI $.Parser
Jun 02 jQuery
JavaScript 判断iPhone X Series机型的方法
Jan 28 Javascript
使用jQuery实现掷骰子游戏
Oct 24 jQuery
在vue-cli中引入lodash.js并使用详解
Nov 13 Javascript
jQuery轮播图功能制作方法详解
Dec 03 jQuery
微信小程序实现组件顶端固定或底端固定效果(不随滚动而滚动)
Apr 09 Javascript
javascript使用Blob对象实现的下载文件操作示例
Apr 18 Javascript
JavaScript ES6的函数拓展
Jan 18 #Javascript
Vue提供的三种调试方式你知道吗
Jan 18 #Vue.js
详解Vue项目的打包方式(生成dist文件)
Jan 18 #Vue.js
html5调用摄像头截图功能
Jan 18 #Javascript
在 HTML 页面中使用 React的场景分析
Jan 18 #Javascript
Element-ui Layout布局(Row和Col组件)的实现
Dec 06 #Vue.js
浅谈JavaScript作用域
Dec 06 #Javascript
You might like
给海燕B411配件机起死回生配上件
2021/03/02 无线电
文件上传之SWFUpload插件(代码)
2015/07/30 PHP
PHP 输出缓冲控制(Output Control)详解
2016/08/25 PHP
Laravel 错误提示本地化的实现
2019/10/22 PHP
window.open的页面如何刷新(父页面)上层页面
2012/12/28 Javascript
让jQuery Mobile不显示讨厌loading界面的方法
2014/02/19 Javascript
jquery遍历checkbox介绍
2014/02/21 Javascript
js获取select默认选中的Option并不是当前选中值
2014/05/07 Javascript
基于jquery实现发送文章到手机的代码
2014/12/26 Javascript
jQuery实现菜单式图片滑动切换
2015/03/14 Javascript
jquery实现模拟百分比进度条渐变效果代码
2015/10/29 Javascript
在html中引入外部js文件,并调用带参函数的方法
2016/10/31 Javascript
微信小程序开发一键登录 获取session_key和openid实例
2016/11/23 Javascript
利用Mongoose让JSON数据直接插入或更新到MongoDB
2017/05/03 Javascript
javascript 中iframe高度自适应(同域)实例详解
2017/05/16 Javascript
JS中将多个逗号替换为一个逗号的实现代码
2017/06/23 Javascript
vue多种弹框的弹出形式的示例代码
2017/09/18 Javascript
axios简单实现小程序延时loading指示
2018/07/30 Javascript
nodejs require js文件入口,在package.json中指定默认入口main方法
2018/10/10 NodeJs
JS实现图片切换特效
2019/12/23 Javascript
js异步接口并发数量控制的方法示例
2020/11/22 Javascript
python使用fileinput模块实现逐行读取文件的方法
2015/04/29 Python
python通过索引遍历列表的方法
2015/05/04 Python
Python实现从URL地址提取文件名的方法
2015/05/15 Python
Python实现备份MySQL数据库的方法示例
2018/01/11 Python
Python神奇的内置函数locals的实例讲解
2019/02/22 Python
Python列表解析操作实例总结
2020/02/26 Python
python实现IOU计算案例
2020/04/12 Python
python 读取串口数据的示例
2020/11/09 Python
python3爬虫中多线程进行解锁操作实例
2020/11/25 Python
Django缓存Cache使用详解
2020/11/30 Python
CSS3实现莲花绽放的动画效果
2020/11/06 HTML / CSS
HTML5 CSS3实现一个精美VCD包装盒个性幻灯片案例
2014/06/16 HTML / CSS
应聘编辑职位自荐信范文
2014/01/05 职场文书
《秋游》教学反思
2014/04/24 职场文书
Python如何用re模块实现简易tokenizer
2022/05/02 Python