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和一 ...
随机推荐
- LINQ的查询标准操作汇总
记录LINQ的查询标准操作
- visual studio清理nuget包缓存
最近在使用nuget包的时候发现一个问题.昨天我组长明明发了一个新版本的包上去,可在我电脑上死活找不到这个新版本的包.刷新,重启vs,重启电脑,好长时间才出来.今天又碰到这个问题了,在同事电脑上都能搜 ...
- LINQ-Group子句、Into子句及orderby子句
1. Group子句 LINQ表达式必须以from子句开头,以select或Group子句结束,所以除了使用select子句也可以使用Group子句来返回元素分组后的结果.Group子句用来查询结果分 ...
- C++类数组的实现
请看下面的代码: //xy_3_1 2013/10/26 #include<stdio.h> #include<iostream.h> #include<string.h ...
- 给<input>文本框添加灰色提示文字
value="你的提示文字" onFocus="if(value==defaultValue){value='';this.style.color='#000'}&quo ...
- 【C++并发实战】（二）线程管理
前一篇没用markdown编辑器感觉不好看,删了重新发 本篇主要讲述线程的管理,主要包括创建和使用线程 启动线程 线程出现是为了执行任务,线程创建时会给一个入口函数,当这个函数返回时,该线程就会退出, ...
- Uncaught TypeError: timeout.close is not a function. when try to use clearInterval
It's because of your IDE! Make sure you have added automatic imports such as import { clearInterval ...
- Angular面试题三
十六.一个 angular 应用应当如何良好地分层? 目录结构的划分 1.对于小型项目,可以按照文件类型组织,比如: css Js { controllers models services ...
- C++学习笔记(2)----模板
1. 与其他任何类相同,我们既可以在类模板内部,也可以在类模板外部为其定义成员函数,且定义在类模板内的成员函数被隐式声明为内联函数. 2. 默认情况下,对于一个实例化了的类模板,其成员只有在使用时才被 ...
- 整理一下最近Android面试的提问
java相关: 1. public protect private default关键字有什么区别? public:表示可以在任何一个类中被访问: protect:表示可以在自身.子类以及同一包下的类 ...