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

功能实现：

1.发布人和发布内容非空校验2.编辑删除功能3.楼层效果展示4.发布时间展示

效果图

目录

tools.js

时间工具包

函数getTime(){ var weeks=['星期日','星期一','星期二','星期三','星期四','星期五','星期六'];var Date=新日期()；var年份=日期。getfull year()；var month=日期。get month()1；var da=日期。getdate()；var hour=date.getHours()10？“0”日期。gethours():日期。gethours()；定义变量分钟=date.getMinutes()10？“0”日期。getminutes(): date。getminutes()；var second=date.getSeconds()10？“0”日期。getseconds():日期。getseconds()；var week=date。GetDay()；"变化时间=年份"年"月"月爸爸日小时' : '分钟' : '秒' '周[周];返回时间；}留言板。超文本标记语言

！DOCTYPE html html head lang=' en ' meta charset=' UTF-8 ' title/title script type=' text/JavaScript ' src=' http : tools。js '/脚本样式# box { width : 800 pxmargin : 0 auto } text area { width : 800 px } # Li { display : block border-bottom : 1px虚线# ebebebmargin : 10px 0；padd : 8px 0；} /style /head body div id='box' h3留言板/h3发布人：输入类型='text' id='person' value=' '共输入样式="边框：0 "名称=' id=' Lou Zen '文本区域名称=' id=' text '行数=' 10 '/文本区域输入类型='按钮'值='确认发布id='btn'/h3全部留言/h3 hr//div脚本var num=0；var num 1=0；var box=文档。getelementbyid(' box ')；var text=文档。getelementbyid(' text ')；var BTN=文档。getelementbyid(' BTN ')；var person=文档。getelementbyid(' person ')；var ul=文档。创建元素(' ul ')；ul.id=' ul1var time=document。创建元素(' div ')；文件。getelementbyid('卢禅').值=数字'楼；btn.onclick=function() { //非空判断如果(人。value==' ' | | person。value==null){ alert('发布人不允许为空！');返回false} if(文本。value==' ' | | text。value==null){ alert('内容不允许为空！');返回false} //获取时间num=num 1；var datetime=GetTime()；time=document.createTextNode('发布时间：' datetime)；var Li=文档。创建元素(“李”)；li.id=' li//创建删除功能var oA=文档。创建元素(' a ')；var oAtext=文档。createtextnode('删除');oA.href=' #OA。append child(Oattext)；//创建发布文本框var fabu=文档。创建元素(“文本区域”)；fabu . rows=' 10 fabu . style=' margin : 0px宽度： 760像素高度： 138像素；法布。值=文本。价值；fabu.disabled=' disabled//创建编辑功能var Ob=文档。创建元素(' a ')；var oBtext=document。createtextnode('编辑');oB.href=' #ob。append child(OBE XT)；//创建确认按钮var butt=文档。创建元素(“输入”)；butt.type=' buttonbutt.value='确认；屁股。风格。显示='无'；//解决兼容问题var Ali=ul。getelementsbytagname(' Li ')；如果(阿里。长度==0){ ul。阑尾(李)；} else { ul.insertBefore(li，Ali[0])；} //添加节点盒子。阑尾切除术；var lou=document.createTextNode('第数字楼');var persons=文档。createtextnode('发布人：'人。值)；文件。getelementbyid(' person ').值=' ';var文本节点=文档。createtext节点('发布内容：');document.getElementById('text ').值=' ';李。appendchild(卢)；李。appendchild(文档。创建元素(' br ')；li.appendChild(人);李。appendchild(文档。创建元素(' br ')；李。appendchild(文本节点)；李。appendchild(文档。创建元素(' br ')；李。append child(fabu)；li.appendChild(时间);李。阑尾切除术；李。append child(Ob)；li.appendChild(屁股);//删除OA。onclick=function(){ ul。移除子(这个。父节点)；//删除时更新num1//删除次数文件。getelementbyid('卢禅').value=num-num1 '楼；};//编辑卒于onclick=function(){ fabu。禁用=' '；屁股。风格。display=' block} //确认更改屁股。onclick=function(){ fabu。disabled=' disabled屁股。风格。显示='无'；} //楼层展示文件。getelementbyid('卢禅').value=num-num1 '楼；}/脚本/正文/html总结

以上是边肖介绍的JS实现的留言板功能【地板效果显示】。希望对大家有帮助。如果你有任何问题，请给我留言，边肖会及时回复你。非常感谢您对我们网站的支持！