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实现运行代码需要刷新的解决方法
Aug 18 Javascript
Jquery中LigerUi的弹出编辑框(实现方法)
Jul 09 Javascript
JS、jquery实现几分钟前、几小时前、几天前等时间差显示效果的代码实例分享
Apr 11 Javascript
JS生成随机字符串的多种方法
Jun 10 Javascript
jQuery表单域属性过滤器用法分析
Feb 10 Javascript
jQuery结合CSS制作动态的下拉菜单
Oct 27 Javascript
AngularJS 中的指令实践开发指南(一)
Mar 20 Javascript
angularjs封装bootstrap时间插件datetimepicker
Jun 20 Javascript
js微信应用场景之微信音乐相册案例分享
Aug 11 Javascript
jQuery 获取除某指定对象外的其他对象 ( :not() 与.not())
Oct 10 jQuery
在vue里使用codemirror遇到的问题
Nov 01 Javascript
Js和VUE实现跑马灯效果
May 25 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&amp;mysql(六)
2006/10/09 PHP
PHP 面向对象 final类与final方法
2010/05/05 PHP
微信公众号开发之通过接口删除菜单
2017/02/20 PHP
PHP截取发动短信内容的方法
2017/07/04 PHP
利用JS自动打开页面上链接的实现代码
2011/09/25 Javascript
jquery Mobile入门—外部链接切换示例代码
2013/01/08 Javascript
基于javascript实现随机颜色变化效果
2016/01/14 Javascript
利用jquery制作滚动到指定位置触发动画
2016/03/26 Javascript
JS实现拖动滚动条评分的效果代码分享
2016/09/29 Javascript
JS实现按钮添加背景音乐示例代码
2017/10/17 Javascript
vue数据控制视图源码解析
2018/03/28 Javascript
Vue数据驱动表单渲染,轻松搞定form表单
2019/07/19 Javascript
JavaScript实现简单的图片切换功能(实例代码)
2020/04/10 Javascript
基于Electron实现桌面应用开发代码实例
2020/07/07 Javascript
vue.js实现点击图标放大离开时缩小的代码
2021/01/27 Vue.js
[15:41]教你分分钟做大人——灰烬之灵
2015/03/11 DOTA
正确理解python中的关键字“with”与上下文管理器
2017/04/21 Python
python Django 创建应用过程图示详解
2019/07/29 Python
Django 后台获取文件列表 InMemoryUploadedFile的例子
2019/08/07 Python
pytorch 实现将自己的图片数据处理成可以训练的图片类型
2020/01/08 Python
Python嵌入C/C++进行开发详解
2020/06/09 Python
Ubuntu权限不足无法创建文件夹解决方案
2020/11/14 Python
Python3.9.0 a1安装pygame出错解决全过程(小结)
2021/02/02 Python
CSS3中box-shadow的用法介绍
2015/07/15 HTML / CSS
英国领先的大码时装品牌之一:Elvi
2018/08/26 全球购物
英国在线购买轮胎、预订汽车、汽车维修和装配网站:Protyre
2020/04/12 全球购物
前台接待员岗位职责
2014/01/02 职场文书
周年庆典邀请函范文
2014/01/24 职场文书
乡村卫生服务一体化管理实施方案
2014/03/30 职场文书
房屋转让协议书范本
2014/04/11 职场文书
银行竞聘上岗演讲稿
2014/09/12 职场文书
领导新年致辞2016
2015/07/29 职场文书
青年文明号创建口号大全
2015/12/25 职场文书
Python中使用Lambda函数的5种用法
2021/04/01 Python
Mysql中存储引擎的区别及比较
2021/06/04 MySQL
Mysql排查分析慢sql之explain实战案例
2022/04/19 MySQL