js实现简单的评论和回复功能（数组版）
var method={
getDate:function (a,b){
//获取当前日期
//a表示年月日直接的分隔符，b表示时分秒之间的分隔符
var dateStr="",
nowT=new Date(),
nowYear=nowT.getFullYear(),
nowMonth=nowT.getMonth() + 1,
nowDay=nowT.getDate(),
nowHours=nowT.getHours(),
nowMinites=nowT.getMinutes(),
nowSeconds=nowT.getSeconds();
if(a){
dateStr= nowYear + a + method.zero(nowMonth) + a + method.zero(nowDay) + " " + method.zero(nowHours) + b + method.zero(nowMinites) + b + method.zero(nowSeconds);
}else{
dateStr= nowYear + "年" + method.zero(nowMonth) + "月" + method.zero(nowDay) + "日" + " " + method.zero(nowHours) + ":" + method.zero(nowMinites) + ":" + method.zero(nowSeconds);
}
return dateStr
}
}
method.js
<!DOCTYPE html>
<html>
<head lang="en">
<meta charset="UTF-8">
<title></title>
<link rel="stylesheet" href="css/public.css"/>
<style>
.outer{
width:500px;
margin:60px auto 0;
}
textarea{
resize: none;
width:100%;
height:68px;
}
.btn,.replay-box-btn{
width:80px;
height:30px;
margin-top: 20px;
line-height:30px;
text-align:center;
border-radius: 5px;
background: #00c1de;
color:#fff;
cursor: pointer;
}
.comment-con{
margin-top: 20px;
}
h4{
font-size:18px;
font-weight: bold;
}
.comment-msg{
width:380px;
}
.comment-name{
font-weight: bold;
margin-right:30px;
}
.comment-main p>span,.comment-main div>span{
display: block;
width: 80%;
padding:5px;
border-radius:5px;
background:#ccc;
}
.comment-main p>span{
float: left;
}
.comment-main div>span{
float: right;
color:#479EAB;
}
.comment-btn{
width:46px;
height:26px;
text-align:center;
line-height:26px;
cursor: pointer;
font-weight: bold;
}
.replay-box{
display: none;
width:100%;
}
span.comment-time{
display: block;
line-height: 26px;
text-align: center;
}
.userImg,.manageImg{
width: 60px;
height:60px;
}
</style>
</head>
<body>
<form>
<div class="outer">
<div class="clearfix">
<textarea placeholder="请输入评论内容"></textarea>
<div class="btn fr">提交</div>
</div>
<div class="comment-con">
<h4>评论</h4>
<ul></ul>
</div>
</div>
</form>
</body>
<script src="js/jquery-1.11.3.min.js"></script>
<script src="js/method.js"></script>
<script>
var commentJson=[
{
"id":0,
"name":"用户a",
"time":[
"2016-01-01 12:00:00","2016-01-02 12:02:00","2016-01-03 12:03:00"
],
"text":[
{
"status":"0","val":"text1"//status为0表示用户留言，status为1表示管理员回复
},
{
"status":"1","val":"replay1"
},
{
"status":"1","val":"replay2"
}
],
"photo":"images/img1.png"
}
];
var $ul=$(".comment-con>ul")[0];
show(commentJson);
function show(ary){
var str="";
$(ary).each(function(i,item){
str+="<li class='clearfix' rel="+item.id+"><img class='userImg' src='"+item.photo+"' class='fl'/><div class='fr comment-msg clearfix'><div>" +
"<span class='comment-name'>"+item.name+"</span></div><div class='comment-main clearfix'>";
for(var x=0;x<item.text.length;x++){
str+="<span class='comment-time'>"+item.time[x]+"</span>";
if(item.text[x].status == "0"){
str+="<p class='clearfix'><span>"+item.text[x].val+"</span></p>";
}else{
str+="<div class='clearfix'><span>"+item.text[x].val+"</span></div>";
}
}
str+="</div><div class='comment-btn'>回复</div></div></li>";
});
$(".comment-con>ul").html(str);
}
show(commentJson);
$(".btn").on("click",function(){
var obj={},_val=$("textarea").val(),_name ="用户名",_time=method.getDate("-",":"),aryLen=commentJson.length,_photo="images/img1.png";
if(_val != ""){
obj={
"id":aryLen,
"name":_name,
"time":[_time],
"text":[{"status":"0","val":_val}],
"photo":_photo
};
commentJson.push(obj);
show(commentJson);
$("textarea").val("");
}else{
alert("请输入评论信息")
}
});
$(".comment-con ul").delegate($("div.comment-btn"),"click",function(e){
var ev = e || window.event;
var $this=$(ev.target);
var replayStr="",manageImg="images/img1.png";
if($this.hasClass("comment-btn")){
if($(".replay-box").length == 0){
replayStr+="<div class='clearfix replay-box'><div class='fl'><img class='manageImg' src='"+manageImg+"'/></div><div class='fr clearfix'><textarea></textarea><div class='replay-box-btn fr'>发布</div></div></div>";
if($this.siblings(".replay-box").length > 0){
$this.siblings(".replay-box").css("display","block");
}else{
$(replayStr).appendTo($this.parents(".comment-msg"));
$this.siblings(".replay-box").css("display","block");
}
}else{
alert("您有未发表成功的评论，请发表成功后再回复新的评论")
} }
}).delegate($(".replay-box-btn"),"click",function(e){
var ev = e || window.event;
var $this=$(ev.target);
if($this.hasClass("replay-box-btn")){
var _value=$this.siblings('textarea').val(),replayTime=method.getDate("-",":"),_actIndex=$this.parents("li").attr("rel");
var replayObj={
"status":"1","val":_value
};
if(_value != ""){
commentJson[_actIndex].time.push(replayTime);
commentJson[_actIndex].text.push(replayObj);
show(commentJson);
$this.siblings('textarea').val("");
$this.parents(".replay-box").remove()
}else{
alert("请填写回复内容")
}
}
})
</script>
</html>
js实现简单的评论和回复功能（数组版）的更多相关文章
- PHP实现简单的评论与回复功能还有删除信息
我们首先先看一下功能 上面黑色的是评论的下面红色的字体是回复的 再来看看怎么实现的 1.发布评论 <form action="pinglunchili.php" method ...
- php无限级分类实战——评论及回复功能
经常在各大论坛或新闻板块详情页面下边看到评论功能,当然不单单是直接发表评论内容那么简单,可以对别人的评论进行回复,别人又可以对你的回复再次评论或回复,如此反复,理论上可以说是没有休止,从技术角度分析很 ...
- 原生js实现简单的下拉刷新功能
前言: 我们在浏览移动端web页面的时候,经常会用到下拉刷新. 现在我们用原生的js实现这个非常简单的下拉刷新功能. (温馨提示:本文比较基础,功能也很简单.写的不好的地方,希望大神提点一二.) 一. ...
- vuejs2.0运用原生js实现简单的拖拽元素功能
<!DOCTYPE html> <html> <head> <meta name="viewport" content="wid ...
- js实现简单的菜谱全选功能
思路:全选按钮和子按钮分开考虑,当全选按钮选中的时候,也就是其checked为true的时候,所有的子按钮也全都为true,反之,则为false.子按钮的想法是,当点击某一个子按钮的时候,会看一下是否 ...
- 利用php做出简单的发布信息和回复功能
题目要求 1.建一个pinglun的数据库,自己建表2.完成一个简单的发布信息回复功能3.布局可以随便,主要是功能要实现4.注意回复是可以回复每一条的评论5.评论回复功能类似于qq空间的发布信息和回复 ...
- 类似于qq空间类型的评论和回复
最近学习thinkphp,做了一个博客系统,其中感觉实现一个类似于qq空间的评论和回复功能比较复杂,所以把这次的经历记录下来,与大家共勉,具体的方法就不说了,在这里分享一下思路. 目标就是这种,关键是 ...
- Java实现评论回复功能
目录 一.分类方式 1.单一型 2.嵌套型 3.两层型 二.实现原理 1.单一型 2.嵌套型 3.两层型 使用递归循环开发评论回复功能,适用于大部分的简单单体应用 评论功能或许是大多数的单体应用之中会 ...
- 利用修改div的位置+js对象存储div信息 实现简单的div自定义布局功能
原文:利用修改div的位置+js对象存储div信息 实现简单的div自定义布局功能 利用修改div的位置+js对象存储div信息 实现简单的div自定义布局功能1.在界面上添加几个checkbox和一 ...
随机推荐
- [转]How to get return values and output values from a stored procedure with EF Core?
本文转自:https://stackoverflow.com/questions/43935345/how-to-get-return-values-and-output-values-from-a- ...
- 跨域 cookies
script标签请求的js脚本,如果跨域了,请求会带有外域的cookies信息. XMLHttpRequest请求跨域时,需要有Access-Control-*等的头信息,如果需要将cookies传输 ...
- 陆续放给大家一些拿钱买的收费的模板，今天先给一个在某销售网站上排行第一的管理端模板 Ace Responsive Admin Template
下载地址: http://pan.baidu.com/s/1B2xjC 提取密码:le1p 原文地址:http://zhangrou.net/post/2014/06/23/陆续放给大家一些拿钱买的收 ...
- apache 优化配置详解
###=========httpd.conf begin===================##Apache主配置文件##设置服务器的基础目录,默认为Apache安装目录ServerRoot &qu ...
- 回顾经典问题算法：LIS, LCS-（DP类别）
LIS,最长递增子序列说明见:http://blog.csdn.net/sdjzping/article/details/8759870 #include <iostream> #incl ...
- 理解webpack4.splitChunks之chunks
上回说到按照默认的splitChunks配置,入口里面的第三方依赖没有打包出来,这个是因为chunks属性的原因,下面我们就介绍chunks属性的意义和用法. chunks的含义是拆分模块的范围,它有 ...
- 131.007 Unsupervised Learning - Feature Selection | 非监督学习 - 特征选择
1 Why? Reason1 Knowledge Discovery (about human beings limitaitons) Reason2 Cause of Dimensionality ...
- 打印 1 到最大的 n 位数（C++ 和 Python 实现）
(说明:本博客中的题目.题目详细说明及参考代码均摘自 “何海涛<剑指Offer:名企面试官精讲典型编程题>2012年”) 题目 输入数字 n,按顺序打印出从 1 到最大的 n 位十进制数． ...
- maven(11)-聚合多模块
聚合项目 一些开源项目,都会把自己的源代码公开到github之类的网站上,我们通过下载其代码,在本地执行maven install,可以把代码编译成jar包安装到本地仓库.而一个项目通常有 ...
- 为订阅内虚拟机批量安装并配置 Microsoft Anti-Malware 扩展
本文提供了对订阅内的 Windows 经典部署虚拟机和资源管理器部署虚拟机执行批量安装并配置 Microsoft Anti-Malware 扩展的 PowerShell 脚本. 关于安装 Window ...