ドキュメント <br>.wrap {<br> 幅: 400px;<br> margin: 30px auto;<br>}<br>textarea {<br> 表示: ブロック;<br> 幅: 100%;<br> 高さ: 60px;<br>} <br>input {<br> 表示: ブロック;<br> 幅: 60%;<br> マージン: 15px auto;<br>}<br>li {<br> パディング: 5px 10px;<br> 位置: 相対;<br> ワードブレイク: ブレークオール;<br>}<br>.red {<br>色: #000;<br>背景: #f1f1f1;<br>} <br>.pink {<br>色: #000;<br>背景: #ccc;<br>}<br>a {<br>位置:絶対;<br>右:0;<br>上:- 20px;<br>背景:黄色;<br>色:#fff;<br>} <br>#list {<br>マージン:0;<br>パディング:0;<br>リストスタイル:なし;<br>フォント:14px/26px "宋体";<br>}<br>。 clos {<br>位置:絶対;<br>上:0;<br>右:-50px;<br>幅:50px;<br>色:#fff;<br>背景:#000;<br>パディング:5px 0;<br>テキスト装飾:なし;<br>テキスト-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 = "なし";<br> };<br> list.insertBefore(li,list.children[0]);<br> text.value = "";<br> nub++;<br> };<br>}; <br>
![[Web フロントエンド] Node.js クイック スタート](https://img.php.cn/upload/course/000/000/067/662b5d34ba7c0227.png)
