JS实现留言板功能[楼层效果展示]
程序员文章站
2022-09-28 10:59:05
功能实现:
1.发布人和发布内容非空校验
2.编辑删除功能
3.楼层效果展示
4.发布时间展示
效果图
目录
to...
功能实现:
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实现留言板功能[楼层效果展示],希望对大家有所帮助