JS / CSS 实现的便签记录本

  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">&times;</span></li>
 87       <li class="content">CSS<span class="close">&times;</span></li>
 88       <li class="content">JS <span class="close">&times;</span></li>
 89       <li class="content">NODE.JS <span class="close">&times;</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>