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实现前端分页功能
Mar 23 jQuery
jQuery为某个div加入行样式
Jun 09 jQuery
jQuery实现简单的计时器功能实例分析
Aug 29 jQuery
jQuery EasyUI开发技巧总结
Sep 26 jQuery
前端html中jQuery实现对文本的搜索功能并把搜索相关内容显示出来
Nov 14 jQuery
jQuery实现checkbox的简单操作
Nov 18 jQuery
jQuery实现上下滚动公告栏详细代码
Nov 21 jQuery
jQuery时间戳和日期相互转换操作示例
Dec 07 jQuery
jQuery实现的自定义轮播图功能详解
Dec 28 jQuery
浅谈JS和jQuery的区别
Mar 27 jQuery
基于jquery ajax的多文件上传进度条过程解析
Sep 11 jQuery
jQuery实现简单全选框
Sep 13 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不用正则采集速度探究总结
2008/03/24 PHP
浅谈php中mysql与mysqli的区别分析
2013/06/10 PHP
php集成套件服务器xampp安装使用教程(适合第一次玩PHP的新手)
2015/06/03 PHP
PHP 实现文件压缩解压操作的方法
2019/06/14 PHP
AJAX异步从优酷专辑中采集所有视频及信息(JavaScript代码)
2010/11/20 Javascript
php显示当前文件所在的文件以及文件夹所有文件以树形展开
2013/12/13 Javascript
ie8下修改input的type属性报错的解决方法
2014/09/16 Javascript
JavaScript中pop()方法的使用教程
2015/06/09 Javascript
jquery mobile开发常见问题分析
2016/01/21 Javascript
原生javascript实现匀速运动动画效果
2016/02/26 Javascript
深入理解jQuery 事件处理
2016/06/14 Javascript
ES6新特性之类(Class)和继承(Extends)相关概念与用法分析
2017/05/24 Javascript
jQuery动画_动力节点节点Java学院整理
2017/07/04 jQuery
Angularjs中ng-repeat的简单实例
2017/08/25 Javascript
BootStrap实现文件上传并带有进度条效果
2017/09/11 Javascript
SeaJS中use函数用法实例分析
2017/10/10 Javascript
javaScript手机号码校验工具类PhoneUtils详解
2017/12/08 Javascript
axios简单实现小程序延时loading指示
2018/07/30 Javascript
vue生成文件本地打开查看效果的实例
2018/09/06 Javascript
基于Vue组件化的日期联动选择器功能的实现代码
2018/11/30 Javascript
微信小程序绘制图片发送朋友圈
2019/07/25 Javascript
vue tab滚动到一定高度,固定在顶部,点击tab切换不同的内容操作
2020/07/22 Javascript
[00:02]DOTA2新版本使用PA至宝后暴击展示
2014/11/19 DOTA
Python使用scrapy抓取网站sitemap信息的方法
2015/04/08 Python
Python3 处理JSON的实例详解
2017/10/29 Python
Django2.1集成xadmin管理后台所遇到的错误集锦(填坑)
2018/12/20 Python
python模拟鼠标点击和键盘输入的操作
2019/08/04 Python
Python二维数组实现求出3*3矩阵对角线元素的和示例
2019/11/29 Python
python基于celery实现异步任务周期任务定时任务
2019/12/30 Python
Pycharm最新激活码2019(推荐)
2019/12/31 Python
详解Python3 中的字符串格式化语法
2020/01/15 Python
如何真正的了解python装饰器
2020/08/14 Python
Boom手表官网:瑞典手表品牌,设计你的手表
2019/03/11 全球购物
一年级家长会邀请函
2014/01/25 职场文书
护理专业求职信
2014/06/15 职场文书
求职自我评价参考范文
2019/05/16 职场文书