- <!DOCTYPE html>
- <html>
- <head>
- <meta charset="UTF-8">
- <title > 留言板 </title>
- </head>
- <body>
- <h1 > 简易留言板 </h1>
- <div id="box">
- <!--<ul>
- </ul>-->
- </div>
- <textarea id="msg"></textarea>
- <input type="button" id="btn" value="留言"/>
- <button onclick="sum()"> 统计 </button>
- </body>
- <script type="text/javascript">
- var ul = document.createElement('ul');
- var box = document.getElementById('box');
- box.appendChild(ul);
- var btn = document.getElementById('btn');
- var msg = document.getElementById('msg')
- var count = 0;
- btn.onclick = function(){
- console.log(msg.value);
- var li = document.createElement('li');
- // 设置内容
- li.innerHTML = msg.value + "<span> X</span>"
- var lis = document.getElementsByTagName('li');
- if(lis.length == 0){
- ul.appendChild(li);
- count++;
- }else{
- ul.insertBefore(li,lis[0]);
- count++;
- }
- msg.value = '';
- var spans = document.getElementsByTagName('span');
- for(var i = 0; i<spans.length; i++){
- spans[i].onclick = function(){
- ul.removeChild(this.parentNode)
- count--;
- }
- }
- }
- function sum(){
- alert('一共发布了'+count+'条留言');
- }
- </script>
- </html>
来源: http://www.bubuko.com/infodetail-2694686.html