原声js实现用户评论

最新推荐文章于 2023-04-07 00:21:15 发布

ppfxdj

最新推荐文章于 2023-04-07 00:21:15 发布

阅读量390

点赞数 2

分类专栏：前端文章标签：原生js

本文链接：https://blog.csdn.net/ppfxdj/article/details/92803703

版权

前端专栏收录该内容

32 篇文章 1 订阅

订阅专栏

效果图：
在这里插入图片描述
html页面布局：

<!doctype html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>用户评论</title>
	<style>
	*{margin: 0;padding:0; }
	li{list-style: none;}
	body{background: #f9f9f9;font-size: 14px;}
	#box{width: 620px;padding:10px;border:1px solid #ccc;background:#f4f4f4;margin: 10px auto; }
	#fill_in{margin-bottom: 10px;}
	#fill_in li{padding: 5px 0;}
	#fill_in .text{width: 480px;height: 30px;padding: 0 10px;border:1px solid #ccc;line-height:30px;font-size:14px;font-family: arial;margin-left: 14px;}
	#fill_in textarea{width: 480px;height: 100px;line-height: 20px;padding: 5px 10px;border:1px solid #ccc;font-size:14px;font-family:arial;overflow: auto;vertical-align:top;}
	#fill_in .btn{width: 100px;height: 30px;border: 1px solid #ccc;background: #fff;color: #666;font-size: 14px;position: relative;left: 65px;cursor: pointer;}
	#message_text{display:none;}
	#message_text h2{font-size:14px;padding:6px 0 4px 10px;background: #ddd;border-bottom: 1px solid #ccc;position: relative;}
	#message_text li{background: #f9f9f9;border-bottom: 1px solid #ccc;color:#666;overflow: hidden;position: relative;}
	#message_text img{position: absolute;left: 0px;padding: 10px;}
	#message_text h3{padding: 6px;font-size: 14px;line-height: 24px;width: 100px;margin-left: 20px;}
	#message_text h5{padding: 4px;font-size: 12px;line-height: 24px;position: absolute;right: 8px;top: 2px;}
	#message_text p{padding: 0 10px 10px;text-indent: 40px;line-height: 20px;}
	#btn1{border: none;cursor: pointer;color: #666;}
	#pid{position: absolute;right: 10px;top: 5px;font-size: 12px;color: #666;}
	#aid{color: blue;}
	</style>
</head>
<body>
	<div id="box">
		<ul id="fill_in">
			<form>
				<li>用户名: <input type="text" id="text" class="text" placeholder="用户名"></li>
				<li>评论内容: <textarea placeholder="评论内容 10-100字"></textarea></li>
				<li><input type="submit" id="btn" value="提交" class="btn"></li>
			</form>
		</ul>
		<div id="message_text"> 
			<div>
				<h2><button id="btn1">隐藏留言</button><p id="pid">已有 <a id="aid">0</a>人评论</p></h2>
			</div>
			
			<ul>

			</ul>
		</div>
	</div>
	<!--引入js文件-->
	<script src="damo.js"></script>
</body>
</html>

引入的js：

window.onload = function(){
	var oLi = null
		,	oH3 = null
		,	oP = null
		,	oH5 = null
		,	speed = null
		,	timer = null
		,	img = null
		,	sum = 0
		,	oBtn = document.getElementById("btn")
		,	oBtn1 = document.getElementById("btn1")
		,	oMeText = document.getElementById("message_text")
		,	oForm = document.getElementsByTagName("form")[0]
		,	oText = document.getElementById("text")
		,	oTextarea = document.getElementsByTagName("textarea")[0]
		,	oUl = oMeText.getElementsByTagName("ul")[0]
		,	oA = document.getElementById("aid");
		oBtn.onclick = getValue;

		//禁止表单提交
		oForm.onsubmit = function(){return false}; 


		function getValue(){

			//如果未全部填写,提醒用户
			if(oText.value == "" || oTextarea.value == ""){
				alert("就二个框，你还不写全了啊？");
				return;
			}else{
				if(oTextarea.value.length < 10){
					alert("评论内容至少10字");
					return;
				}else if(oTextarea.value.length > 100){
					alert("评论内容超出100字");
					return;
				}
			}

			var date = new Date();
			var time = date.toLocaleString();
			oMeText.style.display = "block";
			oLi = document.createElement("li");
			oImg = document.createElement("img");
			oH3 = document.createElement("h3");
			oH5 = document.createElement("h5");
			oP = document.createElement("p");
			oH3.innerHTML = oText.value;
			oH5.innerHTML = time;
			oP.innerHTML = oTextarea.value;

			//添加评论
			if(oUl.childNodes[0]){
				oUl.insertBefore(oLi,oUl.childNodes[0]);
			}else{
				oUl.appendChild(oLi);
			}
			//插入前面用户的小图片
			oImg.setAttribute("src","img/userBj.png");
			oLi.appendChild(oImg);
			oLi.appendChild(oH3);
			oLi.appendChild(oH5);
			oLi.appendChild(oP);

			//评论数
			sum++;
			oA.innerHTML = sum;

			//清空输入框
			oText.value = "";
			oTextarea.value = "";

			//运动开始
			var	h = oLi.offsetHeight
			oLi.style.height = "0px";
			if(timer){
				clearInterval(timer);
			}
			timer = setInterval(function(){
				goTime(h);
			},35);
			// goTime(h);
		}

		//运动效果
		function goTime(target){
			var top = oLi.offsetHeight;
			speed += 3;
			top += speed;
			if(top > target){
				top = target;
				speed *= -0.7;
			}
			if(top === target && Math.abs(speed) < 3){
				clearInterval(timer);
				timer = null;
				oLi.style.height = target + "px";
			}
			oLi.style.height = top + "px";
		}

		//显示、隐藏评论
		var index = 0;
		oBtn1.onclick = hide;
		function hide(){
			if(index){
				oUl.style.display = "block";
				oBtn1.innerHTML = "隐藏留言";
				index = 0;
			}else{
				oUl.style.display = "none";
				oBtn1.innerHTML = "显示留言";
				index = 1;
			}
			
		}
}

ppfxdj

关注

2
点赞
踩
7

收藏

觉得还不错? 一键收藏
0
评论
原声js实现用户评论

效果图：html页面布局：<!doctype html><html lang="en"><head> <meta charset="UTF-8"> <title>用户评论</title> <style> *{margin: 0;padding:0; } li{list-style: none;}...
复制链接

扫一扫