Document<br>.wrap {<br> width: 400px;<br> margin: 30px auto;<br>}<br>textarea {<br> display: block;<br> width: 100%;<br> height: 60px;<br>}<br>input {<br> display: block;<br> width: 60%;<br> margin: 15px auto;<br>}<br>li {<br> padding: 5px 10px;<br> position: relative;<br> word-break: break-all;<br>}<br>.red {<br> color: #000;<br> background: #f1f1f1;<br>} <br>.pink {<br> color: #000;<br> background: #ccc;<br>}<br>a {<br> position: absolute;<br> right: 0;<br> top: -20px;<br> background: yellow;<br> color: #fff;<br>} <br>#list {<br> margin: 0;<br> padding: 0;<br> list-style: none;<br> font: 14px/26px "宋体";<br>}<br>.clos {<br> position: absolute;<br> top: 0;<br> right: -50px;<br> width: 50px;<br> color: #fff;<br> background: #000;<br> padding: 5px 0;<br> text-decoration: none;<br> text-align: center;<br>}<br>.clos:hover {<br> box-shadow: 0 0 5px rgba(0,0,0,.5)<br>}<br><br>window.onload = function(){<br> var btn = document.querySelector('input');<br> var text = document.querySelector('textarea');<br> var list = document.querySelector('#list');<br> var colors = ["red","pink"];<br> var nub = 0;<br> btn.onclick = function(){<br> if(text.value.trim() == ""){<br> alert("打点字吧");<br> return false;<br> }<br> var li = document.createElement("li");<br> li.innerHTML = text.value;<br> // li.className = colors[nub%colors.length];<br> /* 判断a标签已经被添加，就让a标签显示出来，否则就添加 */<br> if(list.children[0]&&list.children[0].className=="red"){<br> li.className = "pink";<br> } else {<br> li.className = "red";<br> }<br> var a = null;<br> li.onmouseover = function(){<br> if(a) {<br> a.style.display = "block";<br> } else {<br> a = document.createElement("a");<br> a.href = "javascript:;";<br> a.className = "clos";<br> a.innerHTML = "删除";<br> a.onclick = function (){<br> list.removeChild(this.parentNode);<br> };<br> this.appendChild(a);<br> }<br> };<br> li.onmouseout = function(){<br> a.style.display = "none";<br> };<br> list.insertBefore(li,list.children[0]);<br> text.value = "";<br> nub++;<br> };<br>}; <br>
