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 相关文章推荐
JavaScript中的Window窗口对象
Jan 16 Javascript
jquery-easyui关闭tab自动切换到前一个tab
Jul 29 Javascript
JavaScript判断窗口是否最小化的代码(跨浏览器)
Aug 01 Javascript
javascript获取元素CSS样式代码示例
Nov 28 Javascript
jQuery中slideUp()方法用法分析
Dec 24 Javascript
js函数与php函数的区别实例浅析
Jan 12 Javascript
JavaScript程序中实现继承特性的方式总结
Jun 24 Javascript
ThinkJS中如何使用MongoDB的CURD操作
Dec 13 Javascript
Jquery树插件zTree实现菜单树
Jan 24 Javascript
Vue.directive自定义指令的使用详解
Mar 10 Javascript
jQuery中.attr()和.data()的区别分析
Sep 03 jQuery
浅谈Vuex的this.$store.commit和在Vue项目中引用公共方法
Jul 24 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
一个php作的文本留言本的例子(一)
2006/10/09 PHP
php和数据库结合的一个简单的web实例 代码分析 (php初学者)
2011/07/28 PHP
php中strlen和mb_strlen用法实例分析
2016/11/12 PHP
Joomla框架实现字符串截取的方法示例
2017/07/18 PHP
关于 文本框默认值 的操作js代码
2012/01/12 Javascript
Jquery Validate 正则表达式实用验证代码大全
2013/08/23 Javascript
JS远程获取网页源代码实例
2013/09/05 Javascript
javascript获取元素CSS样式代码示例
2013/11/28 Javascript
js获取select选中的option的text示例代码
2013/12/19 Javascript
在jquery中combobox多选的不兼容问题总结
2013/12/24 Javascript
javascript的动态加载、缓存、更新以及复用(一)
2014/06/09 Javascript
javascript引用类型指针的工作方式
2015/04/13 Javascript
JavaScript中split() 使用方法汇总
2015/04/17 Javascript
在Javascript中处理字符串之big()方法的使用
2015/06/08 Javascript
JavaScript学习笔记之检测客户端类型是(引擎、浏览器、平台、操作系统、移动设备)
2015/12/03 Javascript
js控件Kindeditor实现图片自动上传功能
2020/07/20 Javascript
jQuery根据ID、CLASS、等获取对象的实例
2016/12/04 Javascript
JavaScript 详解预编译原理
2017/01/22 Javascript
原生JS实现ajax与ajax的跨域请求实例
2017/12/01 Javascript
D3.js(v3)+react 实现带坐标与比例尺的散点图 (V3版本)
2019/05/09 Javascript
微信小程序 腾讯地图显示偏差问题解决
2019/07/27 Javascript
解决await在forEach中不起作用的问题
2021/02/25 Javascript
[53:15]2018DOTA2亚洲邀请赛3月29日 小组赛A组 KG VS OG
2018/03/30 DOTA
pandas系列之DataFrame 行列数据筛选实例
2018/04/12 Python
使用python制作一个为hex文件增加版本号的脚本实例
2019/06/12 Python
详解Anconda环境下载python包的教程(图形界面+命令行+pycharm安装)
2019/11/11 Python
pyautogui自动化控制鼠标和键盘操作的步骤
2020/04/01 Python
MAC平台基于Python Appium环境搭建过程图解
2020/08/13 Python
python的dict判断key是否存在的方法
2020/12/09 Python
Python将QQ聊天记录生成词云的示例代码
2021/02/10 Python
两种CSS3伪类选择器详细介绍
2013/12/24 HTML / CSS
美国嘻哈文化生活方式品牌:GLD
2018/04/15 全球购物
C#面试问题
2016/07/29 面试题
总经理助理的职责
2014/03/14 职场文书
接触艺术对孩子学习思维有益
2019/08/06 职场文书
python 批量压缩图片的脚本
2021/06/02 Python