简易留言板代码

今天写了一个很简单的简易留言板，完成之后的样式大概就是这么简陋。

 

<h1>
留言板
</h1>
<p id="p">显示条数</p>
<input type="text" id="one" value=""/>
<input type="button" value="留言" onclick="func()"/>

<button onclick="func1()">计算条数</button>
<ul id="ul">

</ul>

上面是html排版

 

下面是JS部分

<script>

//m=0;是为了统计留言条数，从0开始统计。

var m=0;
function func(){
//获取到input的值；
var one=document.getElementById("one");
//获取到放置留言的父元素；
var ul=document.getElementById("ul");
//新建放置留言的子节点；
var newNode=document.createElement("li");
//往节点中放置留言的文字；
newNode.innerHTML=one.value+"&nbsp"+"&nbsp"+"&nbsp"+"&nbsp"+"<span>删除</span>";
//把新创建的节点放到显示留言的元素中；
ul.appendChild(newNode);

if(ul.firstChild){
//把新建的节点插入在留言板位置的第一个；
ul.insertBefore(newNode,ul.firstChild);
//只要有留言插入就给m加一次。
m++;
}else{
//反之，如果没有留言的情况下，那么这个新建的节点就是第一个节点。
ul.firstChild=newNode;
m++;
}
function fn(){
//点击删除留言的节点。
ul.removeChild(newNode);
//在删除的情况下，m也会进行运算，减去留言的条数。
m--;
}  
//设置输入框的值为空，是为了在留言之后框内不会再有留过言的内容，
//方便下次继续留不同的话。
one.value="";
var span=document.querySelector("span");
span.addEventListener("click",fn,false);
}
function func1(){
//点击统计目前留言板的留言条数。
document.getElementById("p").innerHTML="您现在有"+m+"条留言";



}

</script>