使用 jquery 实现一个用户评论框

最新推荐文章于 2022-10-12 09:36:32 发布

滴...滴滴

最新推荐文章于 2022-10-12 09:36:32 发布

阅读量1.3k

点赞数

本文链接：https://blog.csdn.net/Tan_tan_666/article/details/84822986

版权

HTML

<!DOCTYPE html>
<html>
<head>
	<title>用户评论</title>
	<style type="text/css">
		.border{
			width: 80%;
			margin: auto;
			margin-top: 50px
		}
		.textarea{
			width: 100%;
		    height: 127px;
		   background-color: #F2F2F2;
		   border:0px;
		}
		.submit{
			background-color: #2DC074;
			color: white;
			float: right;
			width: 99px;
   			height: 33px;
   			margin-top: 19px;
		}
		.commentFrame{
   			 margin-top: 158px;
		}
		.commentFrame div.size{
			margin-top: 10px;
			color: #ccc;
		}
		.commentFrame div.size span{
			padding-left: 10px;
			font-size: 10px;
			color: #ccc;
		}
		.commentFrame .remove{
			margin-bottom: 10px;
			width: 36px;
			border: 1px solid #ccc;
			color: white;
			background-color: #2DC074;
			font-size: 15px;
		}
		.commentFrame .underline{
			border-bottom: 1px solid #ccc;
		}
	</style>
	<script type="text/javascript" src="jquery-3.3.1.js"></script>
	<script type="text/javascript" src="jquery.validate.js"></script>
	<script type="text/javascript" src="pinglun2.0.js"></script>

</head>
<body>
	<div class="border">
		<p style="font-size: 22px; ">评论<span style="font-size: 12px; color: #ccc; padding-left: 10px">共<spna id="count">0</spna>条评论</span></p>

		<form id="comForm">
			<p>用户名:<input type="" name="userName" placeholder="请输入你的用户名" style="width: 250px;height: 20px;border:0px;background-color: #F2F2F2;"></p>
			<textarea class="textarea" name="content" placeholder="期待你的神评论"></textarea>
			<input style="display: none" type="submit" name="sub">
			<button class="submit" name="submit" >发表评论</button>
		</form>
		
		<div class="commentFrame">
			
		</div>
	</div>
</body>
</html>

js 代码

$(function(){
		// 对Date的扩展，将 Date 转化为指定格式的String   
		// 月(M)、日(d)、小时(h)、分(m)、秒(s)、季度(q) 可以用 1-2 个占位符，   
		// 年(y)可以用 1-4 个占位符，毫秒(S)只能用 1 个占位符(是 1-3 位的数字)   
		// 例子：   
		// (new Date()).Format("yyyy-MM-dd hh:mm:ss.S") ==> 2006-07-02 08:09:04.423   
		// (new Date()).Format("yyyy-M-d h:m:s.S")      ==> 2006-7-2 8:9:4.18   
			Date.prototype.format = function(fmt)   
			{ //author: meizz   
			  var o = {   
			    "M+" : this.getMonth()+1,                 //月份   
			    "d+" : this.getDate(),                    //日   
			    "h+" : this.getHours(),                   //小时   
			    "m+" : this.getMinutes(),                 //分   
			    "s+" : this.getSeconds(),                 //秒   
			    "q+" : Math.floor((this.getMonth()+3)/3), //季度   
			    "S"  : this.getMilliseconds()             //毫秒   
			  };   
			  if(/(y+)/.test(fmt))   
			    fmt=fmt.replace(RegExp.$1, (this.getFullYear()+"").substr(4 - RegExp.$1.length));   
			  for(var k in o)   
			    if(new RegExp("("+ k +")").test(fmt))   
			  fmt = fmt.replace(RegExp.$1, (RegExp.$1.length==1) ? (o[k]) : (("00"+ o[k]).substr((""+ o[k]).length)));   
			  return fmt;   
			}
	
	$("#comForm").validate({
		submitHandler:function(){
			var date = new Date().format("yyyy-MM-dd hh:mm:ss");
			var content = [];
			add(content,$("input[name=userName]").val(),date,$(".textarea").val());
			$("input[name=userName]").val("");
			$(".textarea").val("");
			++count;
			$("#count").text(count);
		},
		rules:{
			userName:{
				required:true,
				maxlength:7
			},
			content:{
				required:true,
				maxlength:300
			}
		},
		messages:{
			userName:{
				required:"请输入用户名(必填)",
				maxlength:"用户名不得超过7个字"
			},
			content:{
				required:"请输入你的评论",
				maxlength:"评论不得超过300字"
			}
		}
	});
	
	var objArray = [];
		
	initialize();
	// 初始化
	function initialize(){
		var content = [];
		for (var i = 0; i < objArray.length; i++) {
			var value = objArray[i];
			add(content,value.name,value.time,value.content);
		}
	}
	function add(Array,name,time,con){		
		Array.push("<div class=underline>");
		Array.push("<div class=size>"+name+"<span >"+time+"</span></div>");
		Array.push("<p><div>"+con+"</div>");
		Array.push("<p><div class=remove onclick=clicks(this)>删除</div>");
		Array.push("</div>");
		$(".commentFrame").prepend(Array.join(""));
	}

	var count = 0;
	// 增加评论
	$(".submit").click(function(){
		$("input[name=sub]").click({
			
		})	
	});


	// 删除评论
	function clicks(_this){
		$(_this).parents(".underline").remove();
		--count;
		$("#count").text(count);
	}

	window.clicks = clicks;
})