从零开始学HTML&&CSS&&JavaScrip——JavaScrip之简易留言板

最新推荐文章于 2022-11-13 11:50:15 发布

学号Java

最新推荐文章于 2022-11-13 11:50:15 发布

阅读量336

点赞数 2

分类专栏：前端基础

本文链接：https://blog.csdn.net/qq_42147171/article/details/104870549

版权

前端基础专栏收录该内容

28 篇文章 0 订阅

订阅专栏

简易留言板

1.实现的效果要求:
2.代码：
3.页面上的效果:

1.实现的效果要求:

通过输入框输入内容
点击留言按钮，发布到留言板上
可以点击留言后面的删除选项进行删除
能正确统计出留言板上的留言数量，并用弹框的形式显示出来
如果输入框没有内容，点击留言按钮，无法进行留言，同时弹出提示框告知输入内容为空不能留言

2.代码：

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title></title>
		<link rel="stylesheet" type="text/css" href="new_file.css"/>
		<script type="text/javascript">
			window.onload=function(){
				var ly=document.getElementById("ly");
				var i=1;
				ly.onclick=function(){
					var te=document.getElementById("textss").value;
					if(te!=""){
					var ptext=document.createElement("p");
					var span=document.createElement("span");
					ptext.innerText=i+"."+te+"  ";
					ptext.className="content";
					span.innerText="X";
					output.appendChild(ptext);
					ptext.appendChild(span);
					document.getElementById("textss").value="";
					var dels=document.getElementsByTagName("span");
					var ptexts=document.getElementsByTagName("p");
					for (var j=0;j<dels.length;j++) {
						dels[j].index=j;
						ptexts[j].index=j
						dels[j].onclick = function () {
					     dels[this.index].remove();
					     ptexts[this.index].remove();
					    }
					}
					    
					i++;
					}else{
						alert("输入的内容不能为空！！！！");
					}
				}
				
				document.getElementById("count").onclick=function(){
					alert("留言的数量为:"+(i-1));
				}
				
			}
		</script>
	</head>
	<body>
		<div id="aa">
		<h1>简易留言板</h1>
		<div id="output">	
		</div>
		<textarea id="textss" cols="25" rows="2" style="float: left;"></textarea><br/>
		<input id="ly" type="button" value="留言"/>
		<input id="count" type="button" value="统计"/>
		</div>
	</body>
</html>

3.页面上的效果:

在这里插入图片描述

学号Java

关注

2
点赞
踩
1

收藏

觉得还不错? 一键收藏
0
评论
从零开始学HTML&&CSS&&JavaScrip——JavaScrip之简易留言板

简易留言板1.实现的效果要求:2.代码：3.页面上的效果:1.实现的效果要求:通过输入框输入内容点击留言按钮，发布到留言板上可以点击留言后面的删除选项进行删除能正确统计出留言板上的留言数量，并用弹框的形式显示出来如果输入框没有内容，点击留言按钮，无法进行留言，同时弹出提示框告知输入内容为空不能留言2.代码：<!DOCTYPE html><html>...
复制链接

扫一扫