jQuery实现评论模块


Posted in jQuery onAugust 19, 2020

本文实例为大家分享了jQuery实现评论模块的具体代码,供大家参考,具体内容如下

本模块可用于评论或留言,输入区模仿畅言,内容显示使用时间轴,以下是示例图。

jQuery实现评论模块

实现代码如下:

index.html

<!DOCTYPE html>
<html lang="en">
 
<head>
 <meta charset="UTF-8">
 <meta name="viewport" content="width=device-width, initial-scale=1.0">
 <meta http-equiv="X-UA-Compatible" content="ie=edge">
 <title>Document</title>
 <link rel="stylesheet" href="css/publish_comment.css" >
</head>
 
<body>
 <div class="comment-box">
 <div class="input-box">
  <div class="input-box-head">
  <img class="user-photo" src="images/photo.jpg">
  </div>
  <div class="input-box-main">
  <div class="box-border-l"></div>
  <div class="box-border-r"></div>
  <div class="box-top"></div>
  <div class="box-main">
   <div class="input-region">
   <textarea class="input-text-area" name="comment_input" placeholder="有事没事说两句..."></textarea>
   </div>
  </div>
  <div class="pub-area">
   <div class="pub-btn"></div>
  </div>
  </div>
 
 </div>
 <div class="show-box">
  <div class="comment-title">评论</div>
  <div class="time-line">
  <div class="comment-content">
   <div class='comment'> <img class=head-shot src='images/photo.jpg'>
   <div class='c-circle'></div>
   <span id='time'>2019-5-15 
   <span id='hour'>15:15</span>
   </span>
   <br>
   <p style='padding:4px'>支持各种类型的Web网站接入,网站只需要粘贴、复制JS代码到网页</p>
   </div>
  </div>
  </div>
 
 </div>
 </div>
 <script src="js/jquery-3.3.1.min.js"></script>
 <script>
 var hei = 200;
 $(function() {
  var dateDom = new Date();
  //获取本地时间,年月日时分
  var year = dateDom.getFullYear();
  var month = dateDom.getMonth() + 1;
  var day = dateDom.getDate();
  var hour = dateDom.getHours();
  var min = dateDom.getMinutes();
 
  $(".time-line").css("height", hei + "px");
 
  $(".pub-btn").click(function() {
  var comment_c = $(".input-text-area").val();
 
  if (comment_c == "") {
   alert("请输入内容");
   return;
  }
 
  $(".comment-content").prepend("<div class='comment'>" + "<img class=head-shot src='images/photo.jpg'>" +
   "<div class='c-circle'></div>" +
   "<span id='time'>" + year + "-" +
   month + "-" +
   day + "  " +
   "<span id='hour'>" + hour + ":" + min + "</span>" +
   "</span>" +
   "<br>" +
   "<p style='padding:4px'>" + comment_c + "</p>" +
   "</div>");
  $(".time-line").css("height", hei + "px");
  hei += 115;
  })
 
 
 })
 </script>
 
</body>
 
</html>

publish_comment.css

* {
 margin: 0;
 padding: 0
}
 
body {
 font-size: 14px;
 font-family: "微软雅黑";
 /* background: url("../images/2.jpg") top no-repeat; */
 background: #333333;
 background-attachment: fixed;
 z-index: 0;
 background-size: 100%;
}
 
.comment-box {
 width: 800px;
 margin: auto;
 margin-top: 100px;
}
 
.input-box {
 width: 100%;
}
 
.input-box-head {
 position: relative;
 width: 100%;
 height: 60px;
 z-index: 10;
}
 
.user-photo {
 width: 40px;
 height: 40px;
 border-radius: 42px;
 border: 1px solid #4398ed;
 position: absolute;
 top: 22px;
 left: 9px;
 font-size: 14px;
 color: #4398ed;
 text-align: center;
 line-height: 42px!important;
 font-family: "Microsoft YaHei";
 cursor: pointer;
 background: 0 0;
}
 
.input-box-main {
 display: block;
 position: relative;
 zoom: 1;
 z-index: 2;
}
 
.box-border-l {
 width: 8px;
 height: 97px;
 position: absolute;
 background: url("../images/border-l.png");
 top: 0;
 left: 0;
}
 
.box-border-r {
 width: 8px;
 height: 97px;
 position: absolute;
 background: url("../images/border-r.png");
 top: 0;
 right: 0;
}
 
.box-main {
 margin: 0 8px;
 height: 96px;
 /* background: #fff; */
 border-bottom: 1px solid #4398ed;
}
 
.box-top {
 width: calc(100% - 16px);
 height: 8px;
 background: url(https://changyan.itc.cn/mdevp/extensions/cmt-box/065/images/border-t.png);
 overflow: hidden;
 position: absolute;
 left: 8px;
 top: 0;
}
 
.input-region {
 padding: 18px 10px 0;
}
 
.input-text-area {
 width: 100%;
 height: 70px;
 background: 0 0;
 overflow-x: hidden;
 overflow-y: auto;
 border: 0;
 font-size: 13px;
 color: #4398ed;
 resize: none;
 line-height: normal;
 text-align: left;
 box-shadow: none;
 -webkit-box-shadow: none;
 outline: none;
 border: none;
}
 
.pub-area {
 width: 100%;
 position: relative;
 z-index: 12;
}
 
.pub-btn {
 position: absolute;
 top: 10px;
 right: 0;
 width: 102px;
 height: 30px;
 overflow: hidden;
 border: 0;
 padding: 0;
 margin: 0;
 cursor: pointer;
 background-image: url("../images/post-btn.png");
 background-repeat: no-repeat;
 background-color: transparent;
}
 
.show-box {
 position: relative;
 top: 10px;
}
 
.comment-title {
 position: absolute;
 top: 35px;
 left: 28px;
 width: 60px;
 height: 60px;
 line-height: 60px;
 text-align: center;
 font-size: 16px;
 color: #4398ed;
 border: 2px solid #4398ed;
 border-radius: 50%;
}
 
.time-line {
 width: 60px;
 height: 0;
 position: absolute;
 top: 100px;
 left: 0;
 border-right: 2px solid #4398ed;
}
 
.comment-content {
 width: 380px;
 height: 80px;
 position: absolute;
 top: 0px;
 left: 60px;
}
 
.comment-content .comment {
 width: 600px;
 height: 80px;
 /* background: #fff; */
 border: 1px solid #4398ed;
 border-radius: 6px;
 margin-top: 30px;
 font-size: 16px;
 line-height: 20px;
 color: #4398ed;
 word-break: break-all;
 position: relative;
 left: 15px;
 padding: 10px;
 box-sizing: border-box;
}
 
.c-circle {
 width: 6px;
 height: 6px;
 border-radius: 50%;
 border: 2px solid #4398ed;
 background: #4398ed;
 position: absolute;
 top: 35px;
 left: -20px;
}
 
.head-shot {
 position: absolute;
 top: 20px;
 left: -70px;
 width: 40px;
 height: 40px;
 border: 1px solid #4398ed;
 border-radius: 50%;
}

以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持三水点靠木。

jQuery 相关文章推荐
jquery.form.js异步提交表单详解
Apr 25 jQuery
jQuery设置图片等比例缩小的方法
Apr 29 jQuery
jQuery Ajax使用FormData上传文件和其他数据后端web.py获取
Jun 11 jQuery
基于jQuery实现图片推拉门动画效果的两种方法
Aug 26 jQuery
jquery tmpl模板(实例讲解)
Sep 02 jQuery
jQuery判断网页是否已经滚动到浏览器底部的实现方法
Oct 27 jQuery
jquery ztree实现右键收藏功能
Nov 20 jQuery
jquery实现侧边栏左右伸缩效果的示例
Dec 19 jQuery
jQuery实现简单复制json对象和json对象集合操作示例
Jul 09 jQuery
jquery实现选项卡切换代码实例
May 14 jQuery
jQuery实现文本显示一段时间后隐藏的方法分析
Jun 20 jQuery
9种方法优化jQuery代码详解
Feb 04 jQuery
jQuery实现简单评论功能
Aug 19 #jQuery
jquery+ajax实现异步上传文件显示进度条
Aug 17 #jQuery
jQuery实现异步上传一个或多个文件
Aug 17 #jQuery
jQuery中event.target和this的区别详解
Aug 13 #jQuery
JQuery通过键盘控制键盘按下与松开触发事件
Aug 07 #jQuery
Jquery cookie插件实现原理代码解析
Aug 04 #jQuery
jQuery实现雪花飘落效果
Aug 02 #jQuery
You might like
用PHP实现弹出消息提示框的两种方法
2013/12/17 PHP
php对数组排序的简单实例
2013/12/25 PHP
Zend Framework入门教程之Zend_Db数据库操作详解
2016/12/08 PHP
动态载入/删除/更新外部 JavaScript/Css 文件的代码
2010/07/03 Javascript
js 数据类型转换总结笔记
2011/01/17 Javascript
myEvent.js javascript跨浏览器事件框架
2011/10/24 Javascript
关于ExtJS4.1:快捷键支持的问题
2013/04/24 Javascript
JS+CSS实现闪烁字体效果代码
2016/04/05 Javascript
AngularJS基础 ng-open 指令简单实例
2016/08/02 Javascript
javascript判断firebug是否开启的方法
2016/11/23 Javascript
vue实现动态数据绑定
2017/04/28 Javascript
基于angular2 的 http服务封装的实例代码
2017/06/29 Javascript
微信小程序中post方法与get方法的封装
2017/09/26 Javascript
Vue模板语法中数据绑定的实例代码
2019/05/17 Javascript
[02:51]DOTA2英雄基础教程 风暴之灵
2013/12/23 DOTA
[01:46]辉夜杯—打造中国DOTA新格局
2015/12/25 DOTA
python 不关闭控制台的实现方法
2011/10/23 Python
基于使用paramiko执行远程linux主机命令(详解)
2017/10/16 Python
python实现微信远程控制电脑
2018/02/22 Python
Pycharm设置去除显示的波浪线方法
2018/10/28 Python
Python代码实现删除一个list里面重复元素的方法
2019/04/02 Python
win10系统下python3安装及pip换源和使用教程
2020/01/06 Python
Python列表去重复项的N种方法(实例代码)
2020/05/12 Python
YSL圣罗兰美妆官方旗舰店:购买YSL口红
2018/04/16 全球购物
设计4个线程,其中两个线程每次对j增加1,另外两个线程对j每次减少1。写出程序。
2014/12/30 面试题
求职简历的自我评价怎样写好
2013/10/07 职场文书
大学生专科学习生活的自我评价
2013/12/07 职场文书
我是一名护士演讲稿
2014/08/28 职场文书
2014年话务员工作总结
2014/11/19 职场文书
民事和解协议书格式
2014/11/29 职场文书
2014年党员个人工作总结
2014/12/02 职场文书
工作报告范文
2019/06/20 职场文书
导游词之上海东方明珠塔
2019/09/25 职场文书
Win11安装受阻怎么办? Windows11安装问题与解决方案汇总
2021/11/21 数码科技
mybatis-plus模糊查询指定字段
2022/04/28 Java/Android
Golang 入门 之url 包
2022/05/04 Golang