阅读 106

JavaScript实例 ODO List分析

这篇文章主要介绍了JavaScript实例 ODO List分析,主要利用JavaScript、css、HTML等实例代码展开起内容的解析,需要的小伙伴可以参考一下

目录
  • 一、实例代码

    • HTML

    • CSS

    • JavaScript

  • 二、实例演示

    • 三、实例剖析

      一、实例代码

      HTML

      1
      2
      3
      4
      5
      6
      7
      8
      9
      10
      11
      12
      13
      14
      15
      16
      17
      18
      19
      20
      21
      22
      23
      24
      25
      26
      27
      28
      29
      30
      31
      32
      <!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

      1
      2
      3
      4
      5
      6
      7
      8
      9
      10
      11
      12
      13
      14
      15
      16
      17
      18
      19
      20
      21
      22
      23
      24
      25
      26
      27
      28
      29
      30
      31
      32
      33
      34
      35
      36
      37
      38
      39
      40
      41
      42
      43
      44
      45
      46
      47
      48
      49
      50
      51
      52
      53
      54
      55
      56
      57
      58
      59
      60
      61
      62
      63
      64
      65
      66
      67
      68
      69
      70
      71
      72
      73
      74
      75
      76
      77
      78
      79
      80
      81
      82
      83
      84
      85
      86
      87
      88
      89
      90
      91
      92
      93
      94
      95
      96
      97
      98
      99
      100
      101
      102
      103
      104
      105
      106
      107
      108
      109
      110
      111
      112
      113
      114
      115
      116
      117
      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

      1
      2
      3
      4
      5
      6
      7
      8
      9
      10
      11
      12
      13
      14
      15
      16
      17
      18
      19
      20
      21
      22
      23
      24
      25
      26
      27
      28
      29
      30
      31
      32
      33
      34
      35
      36
      37
      38
      39
      40
      41
      42
      43
      44
      45
      46
      47
      48
      49
      50
      51
      52
      53
      54
      55
      // 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按钮后

      请添加图片描述

      事项添加成功

      三、实例剖析

      1
      2
      3
      4
      5
      6
      7
      8
      9
      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’这个符号

      1
      2
      3
      4
      5
      6
      7
      8
      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属性绑定函数

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

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

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

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

      1
      2
      3
      4
      5
      6
      7
      8
      9
      10
      11
      12
      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标签的文本,生成之后添加到列表最下面

      1
      2
      3
      4
      5
      6
      7
      8
      9
      10
      11
      12
      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分析的文章就介绍到这了

      原文链接:https://blog.csdn.net/m0_61607810/article/details/121410262


      文章分类
      代码人生
      版权声明:本站是系统测试站点,无实际运营。本文内容由互联网用户自发贡献,该文观点仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌抄袭侵权/违法违规的内容, 请发送邮件至 XXXXXXo@163.com 举报,一经查实,本站将立刻删除。
      相关推荐