前端练习题——JS粗简留言板_留言板题目js-CSDN博客

本文链接：https://blog.csdn.net/Today_He/article/details/108757147

注意：
1、input等输入框，获取的值在value中，不能用innerText、innerHTML
2、this关键字和java中的使用同理，表示当前对象。把当前对象当作参数传递，接收者直接用变量接收即可使用

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title></title>
		<style>
			#title,#username,#content{
				
				width: 150px;
				height: 30px;
				border-radius: 10px;
				background-color: rgb(38,126,86);
				color: white;
				font-size: 20px;
			}
			body{
				font-size: 20px;
				font-weight: 800;
			}
			.li_son{
				width:100% ;
				height: 250px;
				border: 2px gainsboro dashed;
				margin-left: -33px;
				list-style-type: none;
			}
			#name_{
				color: blue;
				text-decoration: underline;
			}
			#remove{
				color: blue;
				text-decoration: underline;
				cursor: pointer;
			}
		</style>
	</head>
	<body>
		<!--用于装新添加的内容（发布的留言内容）-->
		<ul id="ul_father"></ul>


		<!--留言板-->
			<table >
				<tr>
					<td>
						标题：<input type="text" id="title" onfocus="bg(this)" onblur="rebg(this)"/><br/>
					</td>
				</tr>
				<tr>
					<td>
						名字：<input type="text" id="username"  onfocus="bg(this)" onblur="rebg(this)"/><br/>
					</td>
				</tr>
				<tr>
					<td>
						内容：<input type="text" id="content" style="width: 250px;height: 45px;" onfocus="bg(this)" onblur="rebg(this)"/><br/>
					</td>
				</tr>
				<tr>
					<td>
						<input type="button" value="回复" onclick="add()"/>
					</td>
				</tr>
			</table>
	
		
		
		<script language="JavaScript">
			
			var title = document.getElementById("title");
			var username = document.getElementById("username");
			var content = document.getElementById("content");
			
			//装添加留言内容的容器对象
			var ul_father = document.getElementById("ul_father");
			
			//给input框设置动态效果，因为大量重复，使用this去重
			function bg(obj){
				obj.style.backgroundColor = "rgb(255,240,0)";
				
				if(obj != document.getElementById("content")){
					obj.style.width = "250px";
					obj.style.height = "45px";
				}else{
					obj.style.width = "350px";
					obj.style.height = "55px";
				}
			}
			function rebg(obj){
				obj.style.backgroundColor = "rgb(38,126,86)";
				
				if(obj != document.getElementById("content")){
					obj.style.width = "150px";
					obj.style.height = "30px";
				}else{
					obj.style.width = "250px";
					obj.style.height = "45px";
				}
			}
			
			
			//给ul添加li列表（添加每一条内容）
			function add(){
				ul_father.innerHTML += "<li class='li_son'> <h1>标题:"+ title.value + "</h1><h3>名字:<span id='name_'>"+ username.value + "</span></h3><h3>内容:"+content.value+"</h3><span id='remove' οnclick='shanchu(this)'>删除</span></li>" ;
			}
			
			
			
			//删除，每次点击获取的li只有一个，索引始终为0
			function shanchu(obj){
				obj.parentNode.remove();
			}
			
		</script>
	</body>
</html>