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和一 ...
随机推荐
- C#实现单实例运行
C#实现单实例运行的方法,也有多种,比如利用 Process 查找进程的方式,利用 API findwindow 查找窗体的方式,还有就是 利用 Mutex 原子操作,上面几种方法中, 综合考虑利用 ...
- 使用原生JavaScript实现对select增加option标签并附加value属性
好久没有写原生的东西了,今天写了一个小项目里面包含着option选项,所以我决定使用原生JavaScript动态生成, 本着互联网分享精神,我将本篇文章分享给大家. html代码(就是一个select ...
- Centos 7 ip地址
vim /etc/sysconfig/network-scripts/ifcfg-ens33 HWADDR="00:15:5D:07:F1:02" TYPE="Ether ...
- 提交表单时，post方式无法提交（一种情况）
tomcat6,设置文件上传不限制大小maxPostSize="0" 但是在tomcat7及以后版本,应设置为小于0,如maxPostSize="-1" 否则 ...
- poj 1811 Prime Test 大数素数测试+大数因子分解
Prime Test Time Limit: 6000MS Memory Limit: 65536K Total Submissions: 27129 Accepted: 6713 Case ...
- K：hash的应用场景
本博文主要用于讲解Hash的应用场景 Hash主要应用于数据结构中和密码学中. 用于数据结构时,主要是为了提高查询的效率,这就对速度比较重视,对抗碰撞不太看中,只要保证hash均匀分布就可以. 在密码 ...
- C# 调用C++DLL 类型转换
内容转自网上····这里做 备份··· 原文链接: http://blog.csdn.net/miss_easy/article/details/52470964 /C++中的DLL函数原型为 //e ...
- BZOJ2568 [国家集训队2012]比特集合
Description 比特集合是一种抽象数据类型(Abstract Data Type) ,其包含一个集合S,并支持如下几种操作: INS M : 将元素 M 插入到集合S中: DEL M : 将集 ...
- drupal7区块内容对象
区块内容对象
- ES6框架的搭建
1.引入traceur.js http://google.github.io/traceur-compiler/bin/traceur.js 2.将Traceur编译器用于网页 new traceu ...