js实现简单的留言板功能

最新推荐文章于 2024-09-18 07:37:06 发布

jasmyn518

最新推荐文章于 2024-09-18 07:37:06 发布

阅读量2.9k

点赞数 2

分类专栏：笔记 JavaScript HTML 文章标签： javascript 前端 html

本文链接：https://blog.csdn.net/jasmyn518/article/details/121873925

版权

笔记同时被 3 个专栏收录

127 篇文章 4 订阅

订阅专栏

HTML

78 篇文章 2 订阅

订阅专栏

JavaScript

10 篇文章 0 订阅

订阅专栏

这篇博客介绍了如何创建一个简单的网页留言板，该留言板能显示用户的留言并提供删除功能。当用户在文本框输入内容后点击留言按钮，内容将显示在页面上，每个留言旁边都有一个删除按钮，用于移除特定留言。然而，由于未实现数据持久化，页面刷新后所有留言将丢失。目前统计按钮功能尚未实现。

摘要由CSDN通过智能技术生成

实现简单的留言板功能，只是简单的demo，并不能保存数据，如果刷新页面，数据就会丢失，输入内容点击留言按钮，输入的内容即会显示到页面上，同时加上删除按钮，可以删除当前数据。

<!DOCTYPE html>
<html>
<head>
	<title></title>
</head>
<body>
	<div id="content">
		聊天记录<ul id="words"></ul>
	</div>
	<textarea id="msg"></textarea>
	<button id="btn1">留言</button>
	<button id="btn2">统计</button>
</body>
<script type="text/javascript">
	var btn1=document.getElementById("btn1");
	var btn2=document.getElementById("btn2");
	var msg=document.getElementById("msg");
	var ul=document.getElementById("words");
	var liCount=0;
	btn1.onclick=function(){
		if(msg.value){
			var li=document.createElement("li");//添加li标签
			li.innerHTML=msg.value+"&nbsp;&nbsp;&nbsp;&nbsp;<span>X</span>";//在标签中添加内容
			//li添加到ul中有两种情况，有内容或没内容
			if(liCount==0){
				ul.appendChild(li);//追加到后面
				liCount++;
			}else{
				ul.insertBefore(li,ul.childNodes[0]);//最新数据在第一行
				liCount++;
			}
			msg.value="";
			var span=document.getElementsByTagName('span');
			for(var i=0;i<span.length;i++){
				span[i].onclick=function(){
					ul.removeChild(this.parentNode);
					liCount--;
				}
			}
		}else{
			alert("内容不能为空");
		}
	}
	btn2.onclick=function(){

	}
</script>
</html>