功能实现：
1.发布人和发布内容非空校验
2.编辑删除功能
3.楼层效果展示
4.发布时间展示
效果图
![JS实现留言板功能[楼层效果展示]](https://www.freexyz.cn/d/file/20200527/b57417fb9d47d495897e702fe2d87bfd.jpg)
目录
![JS实现留言板功能[楼层效果展示]](https://www.freexyz.cn/d/file/20200527/54765679d8faf3a34a5458c3512c9229.jpg)
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实现留言板功能[楼层效果展示]，希望对大家有所帮助，如果大家有任何疑问请给我留言，小编会及时回复大家的。在此也非常感谢大家对网站的支持！
© 版权声明
THE END
暂无评论内容