js实现简单的留言板功能

最新推荐文章于 2022-10-11 20:36:32 发布

jasmyn518

最新推荐文章于 2022-10-11 20:36:32 发布

阅读量2.8k

点赞数 1

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

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

版权

笔记同时被 3 个专栏收录

127 篇文章 3 订阅

订阅专栏

HTML

78 篇文章 2 订阅

订阅专栏

JavaScript

10 篇文章 0 订阅

订阅专栏

实现简单的留言板功能，只是简单的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>

在这里插入图片描述
统计按钮还未实现，有需求可以再根据实际修改。

jasmyn518

关注

1
点赞
踩
15

收藏

觉得还不错? 一键收藏
打赏
0
评论
js实现简单的留言板功能

实现简单的留言板功能，只是简单的demo，并不能保存数据，如果刷新页面，数据就会丢失，输入内容点击留言按钮，输入的内容即会显示到页面上，同时加上删除按钮，可以删除当前数据。<!DOCTYPE html><html><head> <title></title></head><body> <div id="content"> 聊天记录<ul id="words"></ul>
复制链接

扫一扫