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和一 ...
随机推荐
- ES6学习随笔--字符串模板、解构赋值、对象、循环、函数、Promise、Generrator
在线编译器:babel.github 在nongjs中使用 'use strict' let a = ; 运行node : node --harmony_destructuring xxx.js 代码 ...
- RabbitMQ---8、连接断开处理-断线重连
本文转载于:https://www.itsvse.com/thread-4636-1-1.html: 参考文献:http://www.likecs.com/show-29874.html:https: ...
- <深入理解JavaScript>学习笔记(3)_全面解析Module模式
简介 Module模式是JavaScript编程中一个非常通用的模式,一般情况下,大家都知道基本用法,本文尝试着给大家更多该模式的高级使用方式. 首先我们来看看Module模式的基本特征: 模块化,可 ...
- jQuery事件篇---事件对象
内容提纲: 1.事件对象 2.冒泡和默认行为 发文不易,转载请注明出处! JavaScript 在事件处理函数中默认传递了 event 对象,也就是事件对象.但由于浏览器的兼容性,开发者总是会做兼容方 ...
- MVC官方教程索引
1.MVC教程首页http://www.asp.net/learn/mvc/?lang=cs 2.MVC概况2.1创建一个基于数据库的"电影"web应用http://www.asp ...
- [javaSE] 多线程（join方法）
多条线程并发执行,随机切换,调用join()方法,会使当前线程所在的线程(一般主线程)冻结,直到当前线程结束,所在的线程才恢复继续执行 class JoinTestDemo implements Ru ...
- Android中自定义弹出PopupWindow后返回按键失效的问题解决
PopupWindow出现之后,默认的是所有的操作都无效的,除了HOME键.而且是可以操作后面的界面的.想要锁定后面的界面,很简单,只需要让PopupWindow是focusable的:popupWi ...
- Java求一个数组中的最大值和最小值
原创作品,转载请注明出处:https://www.cnblogs.com/sunshine5683/p/9927186.html 今天在工作中遇到对一个已知的一维数组取出其最大值和最小值,分别用于参与 ...
- Java - 线程基本概念
[java并发编程实战]-----线程基本概念 线程状态图 说明:线程共包括以下5种状态.1. 新建状态(New) : 线程对象被创建后,就进入了新建状态.例如,Thread thre ...
- POJ 1789（最小生成树）
这题要把给的字符串变成边的权值 #include <cstdio> #include <iostream> #include <queue> #include &l ...