留言板
我们平时在一些社交的网站啊，发帖评论啊，都能看到有留言的功能，
那么博主今天就来给大家简单编写一下留言板的小程序。
首先我只做的留言板分为这几部分：
- 有楼层，点击发布留言后，会自动弹出楼层
- 楼层内部要有用户姓名，发布的内容，发布的时间
- 用户还可以选择头像来进行发布
- 注意，不写用户名和留言内容就提交是不可以的，不选择头像也不可以
留言板代码:
HTML：
<!DOCTYPE html>
<html>
<head lang="en">
<meta charset="UTF-8">
<title>留言板</title>
<link rel="stylesheet" href="css/main.css"/>
<script src="js/js.js"></script>
</head>
<body onload="head()">
<div class="title">
<h1>留言板</h1>
<div id="step" >一共（）楼</div>
</div>
<!--tilte-->
<div id="contents">
<div class="box" id="box">
<div class="tit">1楼</div>
<div class="img"><img src="img/a.jpg" alt=""/></div>
<div class="main">
<div>用户姓名:</div>
<div>留言内容:</div>
</div>
<div class="div02">
<div><a href="javasrcipt:void(0)" onclick="del(this)">删除</a> | <a href="javasrcipt:void(0)" onclick="add(this,0)">点赞（）</a></div>//javasrcipt:void(0)防止页面跳转，点击不做任何事
<div>发布时间:2020年3月14日</div>
</div>
</div>
</div>
<h1 class="title01">发布留言</h1>
<div class="message">
选择头像
<div id="img">
<img src="img/a.jpg" alt=""/>
<img src="img/b.jpg" alt=""/>
</div>
<div>用户姓名: <input type="text" onfocus="f(this,'请输入用户名')" onblur="f1(this)" id="input"/><span></span></div>
<div>留言内容: <textarea id="button" cols="30" rows="5" onfocus="f(this,'请输入留言内容')" onblur="f1(this)"></textarea><span></span></div>
<button onclick="onMessage()">发布留言</button>
</div>
</body>
</html>
CSS：
*{
padding:0;margin: 0;list-style: none;}/*设置全局样式*/
.title{
width: 1000px;height:40px;border-bottom: 2px solid red;margin: auto}
.title h1{
width:850px;text-align: center;line-height:40px;float: left}
.title #step{
width:150px;line-height: 40px;float: left}
#contents{
width: 1000px; margin: auto;}
#contents .box{
display: none; height: 150px; border-bottom: 1px #ccc dashed; }
#contents .box .tit{
text-align: center; width: 50px; float: left; line-height: 150px;}
#contents .box .img{
width: 100px; height: 100px; border: 1px solid #ccc; float: left; margin: 24px;}
#contents .box .img img{
width: 100px;}
#contents .box .main{
line-height: 40px; width: 600px; height: 125px; margin-top: 25px; float: left;}
#contents .box .div02{
margin-top: 25px; width:190px; float: left; line-height: 30px; }
.title01{
width: 900px;text-align: center}
.message{
width: 500px;margin: auto;line-height: 30px}
#img img{
width: 100px;border:1px solid #ccc;}
#img .border{
border:1px solid red}
.black{
color: black}
.red{
color: red}
css中要把楼层的display属性设置成none，刚开始不显示出来
JS
//判断输入用户名onfocus效果，获取焦点
function f(obj,text){
obj.nextSibling.innerHTML=text;
obj.nextSibling.className="black";
}
//onblur效果，失去焦点
function f1(str){
str.nextSibling.innerHTML="";
}
//删除留言
function del(obj){
var p = obj.parentNode.parentNode.parentNode;
var contents=document.getElementById("contents");
contents.removeChild(p);
}
//点赞增加
var t=0;
function add(obj,t){
t++;
var div=obj.parentNode;
div.innerHTML='<a href="javasrcipt:void(0)" οnclick="del(this)">删除</a> |'+'<a href="javasrcipt:void(0)" οnclick="add(this,'+t+')">点赞（'+t+'）</a>'
}
//提交留言
var i=0;
var j=0;
var y=false;
function onMessage(){
var input = document.getElementById("input");
var button= document.getElementById("button");
if(input.value == ""){
input.nextSibling.innerHTML="*必须填写用户名";
input.nextSibling.className="red";
}else if(button.value==""){
button.nextSibling.innerHTML="*必须填留言内容";
button.nextSibling.className="red";
}else if(y==false){
alert("必须选择一个头像");
}else{
i++;
j++;
var box=document.getElementById("box");
var div=box.cloneNode(true);//克隆盒子
var child=div.getElementsByTagName("div");
div.id="box"+i;//因为id的命名是唯一的，所以这种方法来改变每次克隆出来的盒子的id
div.style.display="block";
child[0].innerHTML=i+"楼";
child[3].innerHTML= "用户姓名:"+input.value;
child[4].innerHTML="留言内容:"+button.value;
child[7].innerHTML="发布时间"+onTime();//获取动态时间
var contents=document.getElementById("contents");
contents.appendChild(div);//在contents中插入克隆的盒子
var step=document.getElementById("step");
step.innerHTML="一共有（"+j+"）楼"//总楼层数增加
input.value="";
button.value="";
}
}
//发布时间
function onTime(){
var date = new Date();
var y = date.getFullYear();
var m = date.getMonth()+ 1;
var r = date.getDate();
var d = date.getDay();
if(d==0){
d="日";}else if(d==1){
d="一"}else if(d==2){
d="二"}else if(d==3){
d="三"}else if(d==4){
d="四"}else if(d==5){
d="五"}else if(d==6){
d="六"}//这里的星期是没有日的，要手动更改一下
var h = date.getHours();
var f =date.getMinutes();
var s = date.getSeconds();
return y + "年" + m + "月" + r + "日" + "星期" + d + "," + h + "时" + f + "分" + s + "秒";
}
//选择头像
function head(){
var pic=document.getElementById("img");
var imgs=pic.getElementsByTagName("img");
var box=document.getElementById("box");
var boxImg=box.getElementsByTagName("img");
for(var a=0;a<imgs.length;a++){
imgs[a].onclick=function(){
for(var b=0;b<imgs.length;b++){
y=true;
imgs[b].className="";
}
this.className="border";
boxImg[0].src=this.src;
}//利用两层循环，里层循环是清空图片的所有样式，外层利用onclick事件，能够让鼠标选择图片后增加图片样式
}
}
博主的图片是自己找的，如果哪位小伙伴也想玩一下这个简易的留言板，可以借鉴一下博主的代码，希望能够帮助到别人，同时上次的轮播博主又增加了一些新的功能，不久后将会更新。