阅读 89

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的页面

      请添加图片描述

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

      请添加图片描述

      点击每一项的最右边有