1 <!doctype html> 2 <html> 3 <head> 4 <meta charset="utf-8"> 5 <title>js实现便签</title> 6 <style> 7 .labelstart{ 8 background:red; 9 text-align:center; 10 margin:50px 50px 0px 50px; 11 padding:30px; 12 } 13 input{ 14 400px; 15 height:25px; 16 box-shadow: 3px 4px 5px grey; 17 border-radius:5px; 18 } 19 .btn{ 20 cursor: pointer; 21 height:30px; 22 border-radius:5px; 23 50px; 24 box-shadow: 3px 4px 5px grey; 25 } 26 #mytab{ 27 28 background:grey; 29 margin:0px 50px 50px 50px; 30 padding:30px; 31 } 32 #mytab li{ 33 border-bottom:1px solid black; 34 height:30px; 35 cursor: pointer; 36 padding:10px 37 } 38 #mytab li:nth-child(odd) { 39 background: lightgrey; 40 } 41 span{ 42 float:right; 43 font-size:16px; 44 padding:10px 45 46 } 47 span:hover{ 48 color:red; 49 cursor: pointer; 50 } 51 ol li.checked { 52 background: #888; 53 color: #fff; 54 text-decoration: line-through; 55 } 56 57 58 ol li.checked::before { 59 content: ''; 60 position: absolute; 61 border-color: #fff; 62 border-style: solid; 63 border- 0 2px 2px 0; 64 top: 10px; 65 left: 16px; 66 transform: rotate(45deg); 67 height: 15px; 68 7px; 69 } 70 71 72 </style> 73 </head> 74 <body> 75 <div class="labelstart"> 76 <h3> 77 请输入要办的事项 78 </h3> 79 <input type="text" id="myInput" > 80 <button type="button" class="btn" onclick="add()"> 81 添加 82 </button> 83 84 </div> 85 <Ol id="mytab"> 86 <li class="content">HTML<span class="close">×</span></li> 87 <li class="content">CSS<span class="close">×</span></li> 88 <li class="content">JS <span class="close">×</span></li> 89 <li class="content">NODE.JS <span class="close">×</span></li> 90 </Ol> 91 92 <script> 93 94 //添加标签 95 96 function add(){ 97 //创建一个li标签 98 var getli=document.createElement("li"); 99 //给li加入class 100 getli.className="content"; 101 //创建span 102 var getspan=document.createElement("span"); 103 104 var getclose=document.createTextNode("u00D7"); 105 //获得input的内容 106 var getinput=document.getElementById("myInput").value; 107 var getcontent=document.createTextNode(getinput); 108 //按顺序添加子节点 109 getspan.className="close"; 110 getspan.appendChild(getclose); 111 getli.appendChild(getcontent); 112 getli.appendChild(getspan) 113 var getol=document.getElementById("mytab"); 114 getol.appendChild(getli) 115 //并且给这里的函数绑定删除事件 116 getspan.onclick=function(){ 117 this.parentElement.style.display = "none"; 118 } 119 } 120 121 122 //给原来的标签注册删去标签事件 123 124 var close = document.getElementsByClassName("close"); 125 var i; 126 for (i = 0; i < close.length; i++) { 127 close[i].onclick = function() { 128 this.parentElement.style.display = "none"; 129 130 } 131 } 132 //当点击li标签时添加中划线 133 var list=document.getElementById("mytab"); 134 list.addEventListener('click', function(ev) { 135 if (ev.target.tagName === 'LI') { 136 ev.target.classList.toggle('checked'); 137 } 138 }, false); 139 140 </script> 141 </body> 142 </html>