<!DOCTYPE html> <html lang="zh"> <head> <meta charset="UTF-8" /> <meta name="viewport" content="width=device-width, initial-scale=1.0" /> <meta http-equiv="X-UA-Compatible" content="ie=edge" /> <title>Document</title> <style> *{margin: 0;padding: 0;} .div{width: 500px; min-height: 300px; border: 1px solid red; margin: auto; margin-top: 200px;} .div .lyb{width: 90%; margin: auto; display: block; border-bottom: 1px solid red; padding: 5px 0px;} .div .div1{width: 90%; border: 1px solid red; margin: 5px auto;} .div .div1 p{width: 100%; padding: 5px 0px; height: 30px; line-height: 30px; } .div .div1 ul{width: 100%;} .div .div1 ul li{width: 100%; height: 30px; padding: 5px 0px; line-height: 30px; list-style: none;margin-bottom: 10px; background: blanchedalmond;} #wbk{resize: none; width: 90%;margin: auto; height: 100px; display: block;} #btn{width: 90%; height: 100px; margin: auto; display: block; margin-top: 5px;} a{float: right} span{float: right;} </style> </head> <body> <div class="div"> <p class="lyb">留言板</p> <div class="div1"> <p class="p">请输入内容</p> <ul> </ul> </div> <textarea id="wbk"></textarea> <input id="btn" type="button" value="发布留言" /> </div> <script> var p = document.getElementsByClassName("p")[0]; var ul = document.getElementsByTagName("ul")[0]; var wbk = document.getElementById("wbk"); var btn = document.getElementById("btn"); var num = 0; btn.onclick = function(){ if(wbk.value.length != 0){ p.style.display = "none"; var li = document.createElement("li"); var em = document.createElement('em'); var a = document.createElement("a"); var span = document.createElement("span"); li.innerHTML = wbk.value; li.insertBefore(em,li.firstChild); a.innerHTML = "点击删除"; a.setAttribute("href","javascript:void(0)"); li.appendChild(a); span.innerHTML = "第" + num + "个"; li.appendChild(span); wbk.value = ""; ul.appendChild(li); fn1(); fn2(); }else{ alert("请输入内容") } } function fn1(){ var ali = document.getElementsByTagName('li'); var ee = document.getElementsByTagName('em'); for(var i=0;i<ali.length;i++){ ee[i].innerHTML = i + 1 + "."; } var ss = document.getElementsByTagName('span'); for(var i=0;i<ali.length;i++){ ss[i].innerHTML = "第" + (i + 1) + "个"; } if(ali.length == 0){ p.style.display = "block"; } } function fn2(){ var aa = document.getElementsByTagName("a"); for(var i=0;i<aa.length;i++){ aa[i].onclick = function(){ this.parentNode.parentNode.removeChild(this.parentNode); fn1(); } } } </script> </body> </html>
Document
留言板
请输入内容