原生JS实现简单留言板功能，实现技术：css flex，原生JS。
因为主要是为了练手js，所以其中布局上的一些细节并未做处理。
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>原生JS 实现留言板功能</title> <style> * { padding: 0; margin: 0; } .container { 1000px; max-height: 100vh; background: lightgray; margin: 0 auto; } .container .content { padding: 20px 20px 0 20px; display: flex; flex-direction: column; } .container .message { display: flex; flex-direction: row; justify-content: space-between; 100%; height: 200px; align-items: flex-end; } .container .enterMsg { 76%; height: 180px; font-size: 18px; padding: 10px 2%; line-height: 26px; } .container .sendMsg { 15%; height: 60px; line-height: 60px; display: inline-block; font-size: 18px; cursor: pointer; text-align: center; background: lightcoral; border-radius: 6px; } .container .msgs { margin-top: 20px; height: calc(100vh - 270px); background: lightyellow; overflow: auto; border-radius: 6px; padding: 10px 2%; } .container .msgs h3 { margin-bottom: 25px; } .container .msgList { max-height: calc(100vh - 380px); overflow: auto; } .container .singleMsg { border-bottom: thin solid #ccc; padding: 15px 0 15px 0; display: flex; flex-direction: row; justify-content: space-between; } .container .singleMsg .delete { color: #999; cursor: pointer; } .container .singleMsg .delete:hover { text-decoration: underline; } .container .total { text-align: right; height: 60px; line-height: 60px; } </style> </head> <body> <div class="container"> <div class="content"> <div class="message"> <textarea name="msg" id="enterMsg" class="enterMsg" placeholder="请开始你的表演吧......"></textarea> <span id="sendMsg" class="sendMsg">留 言</span> </div> <div class="msgs"> <h3>留言区</h3> <div class="msgList" id="messageList"> <div class="singleMsg"> <p>一个人静静坐在电脑前写代码，有种武林高手闭关修炼的感觉！</p> <p class="delete">删除</p> </div> </div> <div class="total">总共有 <span id="votes">1</span>条留言</div> </div> </div> </div> <script> //设置页面高度，保持一屏显示 var maxH = document.documentElement.clientHeight; var container = document.querySelector('.container'); container.style.height = maxH + 'px'; //留言 var enterMsg = document.getElementById('enterMsg'); var sendMsg = document.getElementById('sendMsg'); var msgList = document.getElementById('messageList'); var votes = 0; //统计留言条数 sendMsg.onclick = function(e){ var msg = enterMsg.value; if(msg === ''){ alert('您还没有输入内容哦！'); return; } new createDiv(msg, msgList); votes ++; enterMsg.value = ''; //msg = ''; //把enterMsg的value值保存下来后，msg只是一个副本，与enterMsg没有关系 document.getElementById('votes').innerHTML = votes; }; function createDiv(obj, el){ this.div = document.createElement('div'); this.div.className = 'singleMsg'; this.p1 = document.createElement('p'); this.p1.innerHTML = obj; this.p2 = document.createElement('p'); this.p2.className = 'delete'; this.p2.innerHTML = '删除'; this.div.appendChild(this.p1); this.div.appendChild(this.p2); el.insertBefore(this.div, el.childNodes[0]); var that = this; this.p2.onclick = function(){ that.div.remove(); if(votes <= 0){ votes = 0; } votes --; document.getElementById('votes').innerHTML = votes; }; } </script> </body> </html>