这篇文章主要介绍JS如何实现留言板功能以楼层效果展示,文中介绍的非常详细,具有一定的参考价值,感兴趣的小伙伴们一定要看完!
JS的作用是什么
1,能够嵌入动态文本于HTML页面。2,对浏览器事件做出响应。3,读写HTML元素。4、在数据被提交到服务器之前验证数据。5,检测访客的浏览器信息。6,控制饼干,包括创建和修改等7,基于节点。js技术进行服务器端编程。
<强>功能实现:
强>
1。发布人和发布内容非空校验
2。编辑删除功能
3。楼层效果展示
4。发布时间展示
效果图
function 取得时间(){ var 才能;weeks =,(“星期日“,“星期一“,“星期二“,“星期三“,“星期四“,“星期五“,“星期六“); var 才能;date =, new 日期(); var 才能;year =, date.getFullYear (); var 才能;month =, date.getMonth () + 1; var 才能;da =, date.getDate (); var 才能;hour =, date.getHours () & lt; 10, ?,“0, + date.getHours (),:, date.getHours (),; var 才能;minute =, date.getMinutes () & lt; 10, ?,“0, + date.getMinutes (),:, date.getMinutes (),; var 才能;second =, date.getSeconds () & lt; 10, ?,“0, + date.getSeconds (),:, date.getSeconds (),; var 才能;week =, date.getDay (); var 才能;time =,年+“年“+月+“月“+ da +“日,“+小时+“:“+分钟+“:“+ second +“,“+周(周); return 才能;时间; }
<>强留言板。html 强>
& lt; ! DOCTYPE html> & lt; html> & lt;才能head lang=癳n"比; ,,,& lt; meta charset=癠TF-8"比; ,,,& lt; title> & lt;/title> ,,,& lt; script 类型=拔谋?javascript" https://www.yisu.com/zixun/, src=" tools.js "> 脚本> <时尚> #箱{ 宽度:800 px; 保证金:0汽车; } textarea { 宽度:800 px; } 李# { 显示:块; 边界底部:1 px # ebebeb破灭; 保证金:10 px 0; 填充:8 px 0; }> 风格 >头 <身体><>脚本 var num=0; var num1=0; var盒=. getelementbyid(“盒”); var文本=. getelementbyid(“文本”); var btn=. getelementbyid (btn); var人=. getelementbyid(“人”); var ul=document.createElement (“ul”); ul。id=" ul1”; var时间=document.createElement (" div "); . getelementbyid (louceng) value=num +“楼”; btn。onclick=function () {//非空判断 如果(person.value==" " | | person.value==null) { alert("发布人不允许为空! "); 返回错误; } 如果(text.value==" " | | text.value==null) { alert("内容不允许为空! "); 返回错误; }//获取时间 num=num + 1; var datetime=取得时间(); 时间=文档。createTextNode (" + datetime); 李var=document.createElement(“李”); 李。id="李";//创建删除功能 var oA=document.createElement (“a”); var oAtext=document.createTextNode(“删除”); 办公自动化。href=" # "; oA.appendChild (oAtext);//创建发布文本框 var fabu=document.createElement(“文本区域”); fabu。行=" 10 "; fabu。风格=" margin: 0 px;宽度:760 px;身高:138 px;”; fabu。值=text.value; fabu.disabled="禁用";//创建编辑功能 var oB=document.createElement (“a”); var oBtext=document.createTextNode(“编辑”); oB.href=" # "; oB.appendChild (oBtext);//创建确认按钮 var屁股=document.createElement(“输入”); 的屁股。类型=鞍磁ァ? 的屁股。值="确认”; butt.style。显示=懊挥小?//解决兼容问题 阿里var=ul.getElementsByTagName(“李”); 如果(ali)。长度==0){ ul.appendChild(李); 其他}{ ul。方法(李,阿里[0]); }//添加节点 box.appendChild (ul); var卢=document.createTextNode(“第”+ num +“楼”); var=文档。createTextNode(“发布人:“+ person.value); . getelementbyid(“人”)value=" "; var textnode=document.createTextNode(“发布内容:”); . getelementbyid(“文本”)value=" "; li.appendChild (lou); li.appendChild (document.createElement (br)); li.appendChild(人); li.appendChild (document.createElement (br)); li.appendChild (textnode); li.appendChild (document.createElement (br)); li.appendChild (fabu); li.appendChild(时间); li.appendChild (oA); li.appendChild (oB); li.appendChild(屁股);//删除 办公自动化。onclick=function () { ul.removeChild (this.parentNode);//删除时更新 num1 + +,//删除次数 . getelementbyid (louceng) value=num-num1 +“楼”; };//编辑 oB.onclick=function () { fabu。禁用=" "; butt.style。显示=翱椤? }//确认更改 的屁股。onclick=function () { fabu.disabled="禁用"; butt.style。显示=懊挥小? }//楼层展示 . getelementbyid (louceng) value=num-num1 +“楼”; }>留言板
发布人: 共<输入name=" " id=" louceng ">JS如何实现留言板功能以楼层效果展示