JS实现留言板功能[楼层效果展示]

时间：2021-05-26

功能实现：

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"> <h3>留言板 </h3> 发布人：<input type="text" id="person" value=""> 共<input style="border: 0;" name="" id="louceng"> <textarea name="" id="text" rows="10"></textarea> <input type="button" value="确认发布" id="btn" /> <h3>全部留言</h3> <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实现留言板功能[楼层效果展示]，希望对大家有所帮助，如果大家有任何疑问请给我留言，小编会及时回复大家的。在此也非常感谢大家对网站的支持！

声明：本页内容来源网络，仅供用户参考；我单位不保证亦不表示资料全面及准确无误，也不保证亦不表示这些资料为最新信息，如因任何原因，本网内容或者用户因倚赖本网内容造成任何损失或损害，我单位将不会负任何法律责任。如涉及版权问题，请提交至online#300.cn邮箱联系删除。

相关文章