这篇文章主要介绍JS如何实现留言板功能以楼层效果展示，文中介绍的非常详细，具有一定的参考价值，感兴趣的小伙伴们一定要看完！
1、能够嵌入动态文本于HTML页面。2、对浏览器事件做出响应。3、读写HTML元素。4、在数据被提交到服务器之前验证数据。5、检测访客的浏览器信息。6、控制cookies，包括创建和修改等。7、基于Node.js技术进行服务器端编程。
功能实现：
1.发布人和发布内容非空校验
2.编辑删除功能
3.楼层效果展示
4.发布时间展示
效果图
目录
tools.js
时间工具包
function getTime(){ var weeks = ["星期日","星期一","星期二","星期三","星期四","星期五","星期六"]; var date = new Date(); var year = date.getFullYear(); var month = date.getMonth()+1; var da = date.getDate(); var hour = date.getHours()<10 ? "0"+date.getHours() : date.getHours() ; var minute = date.getMinutes()<10 ? "0"+date.getMinutes() : date.getMinutes() ; var second = date.getSeconds()<10 ? "0"+date.getSeconds() : date.getSeconds() ; var week = date.getDay(); var time = year+"年"+month+"月"+da+"日 "+hour+":"+minute+":"+second +" "+weeks[week]; return time; }留言板.html
<!DOCTYPE html> <html> <head lang="en"> <meta charset="UTF-8"> <title></title> <script type="text/javascript" src="tools.js"></script> <style> #box { width: 800px; margin: 0 auto; } textarea { width: 800px; } #li { display: block; border-bottom: 1px dashed #ebebeb; margin: 10px 0; padding: 8px 0; } </style> </head> <body> <div id="box"> <h4>留言板 </h4> 发布人：<input type="text" id="person" value=""> 共<input name="" id="louceng"> <textarea name="" id="text" rows="10"></textarea> <input type="button" value="确认发布" id="btn" /> <h4>全部留言</h4> <hr/> </div> <script> var num = 0; var num1 = 0; var box = document.getElementById("box"); var text = document.getElementById("text"); var btn = document.getElementById("btn"); var person = document.getElementById("person"); var ul = document.createElement("ul"); ul.id = "ul1"; var time = document.createElement("div"); document.getElementById("louceng").value=num+"楼"; btn.onclick = function() { //非空判断 if(person.value==""||person.value==null){ alert("发布人不允许为空！"); return false; } if(text.value==""||text.value==null){ alert("内容不允许为空！"); return false; } //获取时间 num = num+1; var datetime = getTime(); time = document.createTextNode("发布时间：" + datetime); var li = document.createElement("li"); li.id = "li"; //创建删除功能 var oA = document.createElement("a"); var oAtext = document.createTextNode("删除"); oA.href = "#"; oA.appendChild(oAtext); //创建发布文本框 var fabu = document.createElement("textarea"); fabu.rows = "10"; fabu.style = "margin: 0px; width: 760px; height: 138px;"; fabu.value = text.value; fabu.disabled="disabled"; //创建编辑功能 var oB = document.createElement("a"); var oBtext = document.createTextNode("编辑"); oB.href = "#"; oB.appendChild(oBtext); //创建确认按钮 var butt = document.createElement("input"); butt.type = "button"; butt.value = "确认"; butt.style.display = "none"; //解决兼容问题 var ali = ul.getElementsByTagName("li"); if(ali.length == 0) { ul.appendChild(li); } else { ul.insertBefore(li, ali[0]); } //添加节点 box.appendChild(ul); var lou = document.createTextNode("第"+num+"楼"); var persons = document.createTextNode("发布人："+ person.value); document.getElementById("person").value=""; var textnode = document.createTextNode("发布内容："); document.getElementById("text").value=""; li.appendChild(lou); li.appendChild(document.createElement("br")); li.appendChild(persons); li.appendChild(document.createElement("br")); li.appendChild(textnode); li.appendChild(document.createElement("br")); li.appendChild(fabu); li.appendChild(time); li.appendChild(oA); li.appendChild(oB); li.appendChild(butt); //删除 oA.onclick = function() { ul.removeChild(this.parentNode); //删除时更新 num1++;//删除次数 document.getElementById("louceng").value=num-num1+"楼"; }; //编辑 oB.onclick = function() { fabu.disabled = ""; butt.style.display = "block"; } //确认更改 butt.onclick = function() { fabu.disabled="disabled"; butt.style.display = "none"; } //楼层展示 document.getElementById("louceng").value=num-num1+"楼"; } </script> </body> </html>以上是“JS如何实现留言板功能以楼层效果展示”这篇文章的所有内容，感谢各位的阅读！希望分享的内容对大家有帮助，更多相关知识，欢迎关注亿速云行业资讯频道！
免责声明：本站发布的内容（图片、视频和文字）以原创、转载和分享为主，文章观点不代表本网站立场，如果涉及侵权请联系站长邮箱：is@yisu.com进行举报，并提供相关证据，一经查实，将立刻删除涉嫌侵权内容。
