简易留言板代码

[JavaScript] 纯文本查看 复制代码

<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+" "+" "+" "+" "+"<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>

简易留言板代码

[JavaScript] 纯文本查看 复制代码

<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+" "+" "+" "+" "+"<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>