Javascript简易留言板实现

模仿淘宝评论留言的简易留言板

最终效果图如下：

思路：想到留言板就想到了 标签，这个标签定义多行的文本输入控件，然后在评论框旁边设置button按钮，点击进行留言。留言的内容是一条一条的，首选列表，创建隐形的ul，在鼠标点击的时候再创建li，将显示有留言内容的li添加进ul中，这就完成了初始的留言板，随后进行优化，例如加上时间和删除功能等。

遇到的问题：关于时间的两个问题和添加留言顺序及删除留言的问题
（1）每次点击评论事件显示的都为同一时间，即运行代码时获得的时间
（2）时间在时分秒上会出现个位数字，看着不够美观，个人想法在个位数字前面加上0
（3）想让最新的留言显示在之前留言的上方，但是只使用appendChild是解决不了的
（4）删除留言

解决方案：针对以上几个问题的解决方案
（1）将时间的获取从window.onload中放入点击事件中，即每点击一次评论按钮，都会获取一次新的时间，同时还有一些细节的问题
例如我将时间的获取放进点击事件中还是不生效：

comment.onclick=function(){
	var date=new Date();
	var datearr=[date.getFullYear(),date.getMonth()+1,date.getDate(),date.getHours(),date.getMinutes(),date.getMinutes()];
	comm_li.innerHTML="我"+"&nbsp"+"&nbsp"+datearr[0]+"-"+datearr[1]+"-"+datearr[2]+"&nbsp"+datearr[3]+":"+datearr[4]+":"+datearr[5]+"<br>"+mess.value+"<span class='close'>删除</span>";
}

这里我偷了个小懒没有设置变量去接收各个时间值，这就出现问题了，导致每次获取的时间都是一样的。
后来进行修改：

comment.onclick=function(){
	var date=new Date();
	var year=date.getFullYear();
	var month=date.getMonth()+1;
	var day=date.getDate();
	var hour=date.getHours();
	var minutes=date.getMinutes();
	var seconds=date.getSeconds();
	var datearr=[year,month,day,hour,minutes,seconds];
	comm_li.innerHTML="我"+"&nbsp"+"&nbsp"+datearr[0]+"-"+datearr[1]+"-"+datearr[2]+"&nbsp"+datearr[3]+":"+datearr[4]+":"+datearr[5]+"<br>"+mess.value+"<span class='close'>删除</span>";
}

这样输出的时间是可以根据你的留言时间进行变化的。解决！

（2）使用三目运算符：要判断的值>9?要判断的值：“0”+要判断的值

for(var i=0;i<datearr.length;i++){
	datearr[i]=datearr[i]>9?datearr[i]:"0"+datearr[i];
}

即所要判断的值是否大于9，如果大于（为true）则为其本来的值，若小于（为false）则将该值前面加上0。解决！

（3）针对第三个问题，我找到了一个新的方法：insertBefore()
insertBefore() 方法在您指定的已有子节点之前插入新的子节点。
语法结构：node.insertBefore(newnode,referenceNode)

参数	描述
node	父节点
newnode	必需。将要插入的节点。
referenceNode	可选。被参照的节点（即要插在该节点之前），如果未规定，则 insertBefore 方法会在结尾插入 newnode。

具体解决方案如下：

if(liarr.length==0){
	comm_ul.appendChild(comm_li);
}
else{
	comm_ul.insertBefore(comm_li,liarr[0]);
}

解决！

（4）对于删除留言我想了很多种办法，例如button按钮等，后来决定在comm_li.innerHTML中显示一个span标签：< span class=‘close’>删除< /span>
然后使用getElementsByClassName获取所有的删除span，再用for循环遍历所有并写一个点击事件.
其中用到了removeChild()方法:从子节点列表中删除某个节点
具体解决方案如下：

var closearr=document.getElementsByClassName("close");
for(var i=0;i<closearr.length;i++){
	closearr[i].onclick=function(){
		comm_ul.removeChild(this.parentNode);
	}
}

解决！

话不多说，直接上代码：

<span style="font-size: 14px;color: #666;display: block;margin-bottom: 10px;">我也来说一句...</span>
<textarea id="mess" rows="2" cols="80" style="font-size: 12px;color: #666;resize: none;"></textarea>
<button type="button" id="comment">评论</button>
<div id="container">
	<span>1***5  2019-03-11 12:22:56</span>
	<span>鞋很不错，是正品，派送时出了点儿小问题，客服都认真解答了，推荐大家购买</span>
</div>

#container{border-top: 1px solid #D5D5D5;width: 100%;height: 500px;margin-top: 10px;
font-size: 13px;color: #666;}
#container>span{display: block;margin: 10px;}
.close {display: inline-block;width: 40px;height: 20px;line-height: 20px;text-align: center;
cursor: pointer;background-color: rgba(0, 0, 0,0.1);margin-left: 20px;}

var container=document.getElementById('container');
var comment=document.getElementById("comment");
var mess=document.getElementById("mess");
var comm_ul=document.createElement("ul");
comm_ul.setAttribute("style","padding: 0;")
container.appendChild(comm_ul);
comment.onclick=function(){
	var date=new Date();
	var year=date.getFullYear();
	var month=date.getMonth()+1;
	var day=date.getDate();
	var hour=date.getHours();
	var minutes=date.getMinutes();
	var seconds=date.getSeconds();
	var datearr=[year,month,day,hour,minutes,seconds];
	for(var i=0;i<datearr.length;i++){
		datearr[i]=datearr[i]>9?datearr[i]:"0"+datearr[i];
	}
	var comm_li=document.createElement("li");
	comm_li.setAttribute("class","comm_li");
	comm_li.setAttribute("style","list-style: none;margin: 10px;border-top: 1px solid #D5D5D5;line-height: 25px;");
	comm_li.innerHTML="我"+"&nbsp"+"&nbsp"+datearr[0]+"-"+datearr[1]+"-"+datearr[2]+"&nbsp"+datearr[3]+":"+datearr[4]+":"+datearr[5]+"<br>"+mess.value+"<span class='close'>删除</span>";
	var liarr=document.getElementsByClassName("comm_li");
	if(liarr.length==0){
		comm_ul.appendChild(comm_li);
	}
	else{
		comm_ul.insertBefore(comm_li,liarr[0]);	
	}
	mess.value="";
	var closearr=document.getElementsByClassName("close");
	for(var i=0;i<closearr.length;i++){
		closearr[i].onclick=function(){
			comm_ul.removeChild(this.parentNode);
		}
	}
}