문서 <br>.wrap {<br> 너비: 400px;<br> 여백: 30px auto;<br>}<br>textarea {<br> 디스플레이: 블록;<br> 너비: 100%;<br> 높이: 60px;<br>} <br>입력 {<br> 디스플레이: 블록;<br> 너비: 60%;<br> 여백: 15px 자동;<br>}<br>li {<br> 패딩: 5px 10px;<br> 위치: 상대;<br> 단어 나누기: break-all;<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> 경고( "打点字吧");<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>
![[웹 프런트엔드] Node.js 빠른 시작](https://img.php.cn/upload/course/000/000/067/662b5d34ba7c0227.png)
