JavaScript 實現留言框
阿新 • • 發佈：2018-11-09
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>留言板</title> <style type="text/css"> *{ padding: 0; margin: 0; } .close{ display: inline-block; width: 20px; height: 20px; line-height: 20px; text-align: center; cursor: pointer; background-color: rgba(0,0,0,.1); margin-left: 20px; } </style></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"> // 0 將ul標籤新增到div#box標籤中 var oUl = document.createElement('ul'); var oBox = document.getElementById('box'); oBox.appendChild(oUl); var oBtn = document.getElementById('btn'); var oMsg = document.getElementById('msg') // 控制留言的總數量 var count = 0; oBtn.onclick = function(){ // 點選留言按鈕事件操作 // 1.建立li標籤 var oLi = document.createElement('li'); //2.設定內容 oLi.innerHTML = oMsg.value + "<span class='close'>X</span>" // 3.如果想在插入的第一個li獲取的前面繼續新增li標籤 //3.1獲取li標籤 var olis = document.getElementsByTagName('li'); //3.2 如果是第一次新增的li標籤，則直接新增到ul的後面 if(olis.length == 0){ oUl.appendChild(oLi); count++; }else{ // 3.3 如果不是第一次新增的li標籤，則插入到第一個li標籤的前面 oUl.insertBefore(oLi,olis[0]); count++; } // 4.新增完成之後 清空textarea的值 oMsg.value = ''; // 5.點選X的時候刪除當前的一條資料 //5.1先獲取所有的X var oSpans = document.getElementsByTagName('span'); // 5.2for迴圈 對所有的X新增點選事件 for(var i = 0; i< oSpans.length; i++){ oSpans[i].onclick = function(){ // 5.3 移除當前的li標籤 oUl.removeChild(this.parentNode) count--; } } } function sum(){ alert('一共釋出了'+count+'條留言'); } </script> </html>