简易留言板

最新推荐文章于 2021-07-15 17:23:03 发布

夏之目

最新推荐文章于 2021-07-15 17:23:03 发布

阅读量333

点赞数 2

分类专栏： CSS 文章标签： HTML

本文链接：https://blog.csdn.net/qq_41918580/article/details/103359681

版权

CSS 专栏收录该内容

4 篇文章 0 订阅

订阅专栏

简单的留言板

刚开始学前端，感觉自己的逻辑能力不是多友好，不过我不会放弃的，今天刚学了怎么创建表格，就想到了留言这个功能，花了一些时间完成了，最最基本的功能，后续慢慢的进行补充。大家一起学习，加油。

效果图

在这里插入图片描述

CSS部分

			*{
				padding: 0;
				margin: 0;
			}
			h3{
				margin-top: 10px;			
				margin-left: 520px;
			}
			#comment{
				height: 100px;
				width: 400px;			
				margin-left: 400px;
				margin-top: 20px;
				border-radius: 10px;
				font-size: 20px;				
				background-color: snow;			
			}
			#btn{
				height: 28px;
				width: 80px;
				line-height: 28px;
				border-radius: 10px;	
				background-color: snow;
				}
			#nan{
				height: 200px;
				width: 410px;			
				margin-left: 400px;
				margin-top: 40px;
				border-radius: 10px;
				font-size: 20px;
				border: 1px solid navajowhite;
				background-color: snow;
				}
				ul{
					list-style: none;
				li{
					padding: 5px;
				}
				li a {
						color: #99CCCC;
						font-size: 20px;
				}

javascript部分

<script type="text/javascript">
			window.onload=function()
			{
				var comment=document.getElementById("comment");
				var nan=document.getElementById("nan");
				var btn=document.getElementById("btn");
				var d = new Date();
				btn.onclick=function()
				{
					//创建ul
					var ul=document.createElement("ul");
					//判断输入框是否有内容是否有内容
					if(!comment.value=='')
					{
						//对ul里面进行添加
						ul.innerHTML = "<li>"+comment.value+"</li>";
					}
					//把所创建的添加到nan中
					nan.appendChild(ul);			
				}
			}
			
		</script>

html部分

<body>
		<h3>欢迎大家来留言</h3>
			<textarea id="comment"  >
			</textarea>
			<input type="button" name="" id="btn" value="评论" />
			<div id="nan">
			</div>
			
	</body>

完整代码

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<style type="text/css">
			*{
				padding: 0;
				margin: 0;
			}
			h3{
				margin-top: 10px;			
				margin-left: 520px;
			}
			#comment{
				height: 100px;
				width: 400px;			
				margin-left: 400px;
				margin-top: 20px;
				border-radius: 10px;
				font-size: 20px;				
				background-color: snow;			
			}
			#btn{
				height: 28px;
				width: 80px;
				line-height: 28px;
				border-radius: 10px;	
				background-color: snow;
				}
			#nan{
				height: 200px;
				width: 410px;			
				margin-left: 400px;
				margin-top: 40px;
				border-radius: 10px;
				font-size: 20px;
				border: 1px solid navajowhite;
				background-color: snow;
				}
				ul{
					list-style: none;
				li{
					padding: 5px;
				}
				li a {
						color: #99CCCC;
						font-size: 20px;
				}
		</style>
		<script type="text/javascript">
			window.onload=function()
			{
				var comment=document.getElementById("comment");
				var nan=document.getElementById("nan");
				var btn=document.getElementById("btn");
				var d = new Date();
				btn.onclick=function()
				{
					//创建ul
					var ul=document.createElement("ul");
					//判断输入框是否有内容是否有内容
					if(!comment.value=='')
					{
						//对ul里面进行添加
						ul.innerHTML = "<li>"+comment.value+"</li>";
					}
					//把所创建的添加到nan中
					nan.appendChild(ul);			
				}
			}
			
		</script>
	</head>
	<body>
		<h3>欢迎大家来留言</h3>
			<textarea id="comment"  >
			</textarea>
			<input type="button" name="" id="btn" value="评论" />
			<div id="nan">
			</div>
			
	</body>
</html>

功能很简单，也没采用什么技术，刚开始学，加油！！！
`

夏之目

关注

2
点赞
踩
4

收藏

觉得还不错? 一键收藏
0
评论
简易留言板

简单的留言板刚开始学前端，感觉自己的逻辑能力不是多友好，不过我不会放弃的，今天刚学了怎么创建表格，就想到了留言这个功能，花了一些时间完成了，最最基本的功能，后续慢慢的进行补充。大家一起学习，加油。效果图CSS部分 *{ padding: 0; margin: 0; } h3{ margin-top: 10px; margin-left...
复制链接

扫一扫

专栏目录