JavaScript实例 ODO List分析

2024-04-02 19:04:59 926人浏览薄情痞子

摘要

目录一、实例代码htmlCSSjavascript二、实例演示三、实例剖析一、实例代码 HTML <!DOCTYPE html> <html lang="en"&g

一、实例代码

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) {
  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;
  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%;
  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的页面

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

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

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

点击Add按钮后

事项添加成功

三、实例剖析

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分析内容请搜索编程网以前的文章或继续浏览下面的相关文章希望大家以后多多支持编程网！

点击免费下载>>软考高级考试备考技巧/历年真题/备考精华资料

--结束END--

本文标题: JavaScript实例 ODO List分析

本文链接: https://www.lsjlt.com/news/162907.html(转载时请注明来源链接)

有问题或投稿请发送至: 邮箱/279061341@qq.com QQ/279061341

本篇文章演示代码以及资料文档资料下载

下载Word文档到电脑，方便收藏和打印～

下载Word文档

去做题

猜你喜欢

JavaScript实例 ODO List分析

目录一、实例代码HTMLCSSJavaScript二、实例演示三、实例剖析一、实例代码 HTML <!DOCTYPE html> <html lang="en"&g...

99+

2022-11-13
JavaScript的ODO List实例分析

本文小编为大家详细介绍“JavaScript的ODO List实例分析”，内容详细，步骤清晰，细节处理妥当，希望这篇“JavaScript的ODO List实例分析”文章能帮助大家解决疑惑，下面跟着小编的思路慢慢深入，一...

99+

2023-06-26
python开发之list操作实例分析

本文实例分析了python开发之list操作。分享给大家供大家参考，具体如下：对python中list的操作，大家可以参考《Python list操作用法总结》以下是我个人的笔记： #python ...

99+

2022-06-04

实例操作 python
Javascript API实例分析

这篇文章主要介绍“Javascript API实例分析”的相关知识，小编通过实际案例向大家展示操作过程，操作方法简单快捷，实用性强，希望这篇“Javascript API实例分析”文...

99+

2022-10-19
JavaScript Hoisting实例分析

这篇文章主要介绍“JavaScript Hoisting实例分析”，在日常操作中，相信很多人在JavaScript Hoisting实例分析问题上存在疑惑，小编查阅了各式资料，整理出简单好用的操作方法，希望...

99+

2022-10-19
css中list-style的示例分析

这篇文章主要为大家展示了“css中list-style的示例分析”，内容简而易懂，条理清晰，希望能够帮助大家解决疑惑，下面让小编带领大家一起研究并学习一下“css中list-style的示例分析”这篇文章吧...

99+

2022-10-19
JavaScript原型实例分析

这篇文章主要讲解了“JavaScript原型实例分析”，文中的讲解内容简单清晰，易于学习与理解，下面请大家跟着小编的思路慢慢深入，一起来研究和学习“JavaScript原型实例分析”吧！先看三个对象一、构造函数（对象）：JS中声明函数的三种...

99+

2023-06-29
JavaScript的DOM实例分析

这篇文章主要介绍了JavaScript的DOM实例分析的相关知识，内容详细易懂，操作简单快捷，具有一定借鉴价值，相信大家阅读完这篇JavaScript的DOM实例分析文章都会有所收获，下面我们一起来看看吧。...

99+

2022-10-19
JavaScript变量实例分析

本篇内容主要讲解“JavaScript变量实例分析”，感兴趣的朋友不妨来看看。本文介绍的方法操作简单快捷，实用性强。下面就让小编来带大家学习“JavaScript变量实例分析”吧! &nbs...

99+

2022-10-19
JavaScript的BOM实例分析

这篇文章主要讲解了“JavaScript的BOM实例分析”，文中的讲解内容简单清晰，易于学习与理解，下面请大家跟着小编的思路慢慢深入，一起来研究和学习“JavaScript的BOM实例分析”吧！　　lo...

99+

2022-10-19
JavaScript闭包实例分析

这篇文章主要讲解了“JavaScript闭包实例分析”，文中的讲解内容简单清晰，易于学习与理解，下面请大家跟着小编的思路慢慢深入，一起来研究和学习“JavaScript闭包实例分析”吧！　　JavaSc...

99+

2022-10-19
JavaScript语句实例分析

这篇“JavaScript语句实例分析”文章的知识点大部分人都不太理解，所以小编给大家总结了以下内容，内容详细，步骤清晰，具有一定的借鉴价值，希望大家阅读完这篇文章能有所收获，下面我们一起来看看这篇“Jav...

99+

2022-10-19
JavaScript语法实例分析

本篇内容主要讲解“JavaScript语法实例分析”，感兴趣的朋友不妨来看看。本文介绍的方法操作简单快捷，实用性强。下面就让小编来带大家学习“JavaScript语法实例分析”吧! &nbs...

99+

2022-10-19
JavaScript对象实例分析

本篇内容介绍了“JavaScript对象实例分析”的有关知识，在实际案例的操作过程中，不少人都会遇到这样的困境，接下来就让小编带领大家学习一下如何处理这些情况吧！希望大家仔细阅读，能够学有所成！ Java...

99+

2022-10-19
JavaScript显示实例分析

这篇文章主要讲解了“JavaScript显示实例分析”，文中的讲解内容简单清晰，易于学习与理解，下面请大家跟着小编的思路慢慢深入，一起来研究和学习“JavaScript显示实例分析”吧！ JavaScri...

99+

2022-10-19
JavaScript引入实例分析

这篇“JavaScript引入实例分析”文章的知识点大部分人都不太理解，所以小编给大家总结了以下内容，内容详细，步骤清晰，具有一定的借鉴价值，希望大家阅读完这篇文章能有所收获，下面我们一起来看看这篇“Jav...

99+

2022-10-19
Javascript框架实例分析

今天小编给大家分享一下Javascript框架实例分析的相关知识点，内容详细，逻辑清晰，相信大部分人都还太了解这方面的知识，所以分享这篇文章给大家参考一下，希望大家阅读完这篇文章后有所收获，下面我们一起来了解一下吧。文中的所有代码都基于鸿蒙...

99+

2023-06-27
java集合中list的示例分析

这篇文章主要为大家展示了“java集合中list的示例分析”，内容简而易懂，条理清晰，希望能够帮助大家解决疑惑，下面让小编带领大家一起研究并学习一下“java集合中list的示例分析”这篇文章吧。1、List接口该接口定义的元素是有序的且可...

99+

2023-05-30

java list
mybatis foreach循环list的示例分析

这篇文章主要为大家展示了“mybatis foreach循环list的示例分析”，内容简而易懂，条理清晰，希望能够帮助大家解决疑惑，下面让小编带领大家一起研究并学习一下“mybatis foreach循环list的示例分...

99+

2023-06-29
redis之List操作的案例分析

小编给大家分享一下redis之List操作的案例分析，相信大部分人都还不怎么了解，因此分享这篇文章给大家参考一下，希望大家阅读完这篇文章后大有收获，下面让我们一起去了解一下吧！List操作，redis中的L...

99+

2022-10-18