js留言功能
阿新 • • 發佈:2018-11-02
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>留言板</title> <style> * { padding: 0; margin: 0 } h4 { height: 40px; width: 600px; display: block; margin: 0 auto; border-bottom: 1px solid black; line-height: 40px; } ul { width: 600px; /*height:80px;*/ padding:20px 0; /*padding: 40px 0;*/ margin: 0 auto; border: 1px solid black; } ul li { width: 600px; height: 40px; position: relative; list-style:none; cursor: pointer; text-indent:1em; } ul li p { float: left } ul li .p3 { position: absolute; right: 0; top: -20px; display: none; } textarea { width: 600px; height: 50px; margin: 0 auto; display: block; margin-top: 20px; } input { width: 600px; height: 40px; margin: 0 auto; display: block; } </style> </head> <body> <h4>留言內容</h4> <ul id='ul'> <span id="oSpan">請輸入想說的內容...</span> </ul> <textarea id="te"></textarea><br /> <input type="button" value="發表留言" id='obt'> </body> <script> window.onload=function() { var otext = document.getElementById('te'); var index =0; obt.onclick = function () { index++ oTex = otext.value; if (oTex !== '') { oLi = document.createElement('li'); ul.appendChild(oLi); oLi.innerHTML = index+oTex; oSpan.style.display = 'none'; otext.value = ''; oLi.onclick = function () { this.parentNode.removeChild(this); }; oLi.onmouseover = function () { this.style.background='#f2f2f2'; oP = document.createElement('p'); this.appendChild(oP); oP.innerHTML = '你確認刪除嗎'; oP.className = 'p3'; oP.style.display = 'block'; }; oLi.onmouseout = function () { this.style.background=''; this.removeChild(this.children[0]); } }; } } </script> </html>