你的位置:首页 > 软件开发 > 网页设计 > html留言功能

html留言功能

发布时间:2017-09-14 17:00:08
<!DOCTYPE html><html lang="zh"><head> <meta charset="UTF-8" /> <meta name="viewport&quot ...
<!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

留言板

请输入内容

原标题:html留言功能

关键词:HTML

*特别声明:以上内容来自于网络收集,著作权属原作者所有,如有侵权,请联系我们: admin#shaoqun.com (#换成@)。