简易留言板代码_网页留言板源码

简易留言板代码_网页留言板源码今天写了一个很简单的简易留言板,完成之后的样式大概就是这么简陋

简易留言板代码_网页留言板源码"

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

 

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

 

今天的文章简易留言板代码_网页留言板源码分享到此就结束了,感谢您的阅读。

版权声明:本文内容由互联网用户自发贡献,该文观点仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容, 请发送邮件至 举报,一经查实,本站将立刻删除。
如需转载请保留出处:https://bianchenghao.cn/71970.html

(0)
编程小号编程小号

相关推荐

发表回复

您的电子邮箱地址不会被公开。 必填项已用*标注