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 EasyUI 表单组件增加焦点切换功能的方法
Apr 13 jQuery
Jquery把获取到的input值转换成json
May 15 jQuery
jQuery正则验证注册页面经典实例
Jun 10 jQuery
jQuery简单绑定单个事件的方法示例
Jun 10 jQuery
jQueryMobile之窗体长内容的缺陷与解决方法实例分析
Sep 20 jQuery
jQuery实现打开网页自动弹出遮罩层或点击弹出遮罩层功能示例
Oct 19 jQuery
jQuery判断网页是否已经滚动到浏览器底部的实现方法
Oct 27 jQuery
jQuery图片加载失败替换默认图片方法汇总
Nov 29 jQuery
基于jquery的on和click的区别详解
Jan 15 jQuery
jQuery中each方法的使用详解
Mar 18 jQuery
jQuery实现鼠标移入移出事件切换功能示例
Sep 06 jQuery
在vue项目中使用Jquery-contextmenu插件的步骤讲解
Jan 27 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文件上传表单摘自drupal的代码
2011/02/15 PHP
将酷狗krc歌词解析并转换为lrc歌词php源码
2014/06/20 PHP
php设置静态内容缓存时间的方法
2014/12/01 PHP
Laravel框架实现的使用smtp发送邮件功能示例
2019/03/12 PHP
Yii框架Session与Cookie使用方法示例
2019/10/14 PHP
如何用javascript判断录入的日期是否合法
2007/01/08 Javascript
基于Jquery的温度计动画效果
2010/06/18 Javascript
jquery的键盘事件修改代码
2011/02/24 Javascript
分享20款好玩的jQuery游戏
2011/04/17 Javascript
onkeydown事件解决按回车键直接提交数据的需求
2013/04/11 Javascript
javascript操作referer详细解析
2014/03/10 Javascript
node.js cookie-parser 中间件介绍
2016/06/06 Javascript
js获取页面引用的css样式表中的属性值方法(推荐)
2016/08/19 Javascript
JavaScript实现元素滚动条到达一定位置循环追加内容
2017/12/28 Javascript
Javascript实现异步编程的过程
2018/06/18 Javascript
Vue.js上传图片到阿里云OSS存储的方法示例
2018/12/13 Javascript
jQuery实现的别踩白块小游戏完整示例
2019/01/07 jQuery
JavaScript函数的4种调用方法实例分析
2019/03/05 Javascript
[36:33]Ti4 循环赛第四日 附加赛NEWBEE vs Mouz
2014/07/13 DOTA
Python的批量远程管理和部署工具Fabric用法实例
2015/01/23 Python
python中int与str互转方法
2018/07/02 Python
基于python实现从尾到头打印链表
2019/11/02 Python
jupyter notebook tensorflow打印device信息实例
2020/04/20 Python
Html5之webcoekt播放JPEG图片流
2020/09/22 HTML / CSS
西班牙英格列斯百货官网:El Corte Inglés
2016/09/25 全球购物
捷克电器和DJ设备网上商店:Electronic-star
2017/07/18 全球购物
JD Sports丹麦:英国领先的运动时尚零售商
2020/11/24 全球购物
护士实习自我鉴定
2013/10/22 职场文书
怎么写好自荐书
2014/03/02 职场文书
摄影展策划方案
2014/06/02 职场文书
个人授权委托书样本
2014/09/13 职场文书
光棍节联谊晚会活动策划书
2014/10/10 职场文书
2014年党员个人工作总结
2014/12/02 职场文书
解析MySQL索引的作用
2022/03/03 MySQL
vue中的可拖拽宽度div的实现示例
2022/04/08 Vue.js
总结三种用 Python 作为小程序后端的方式
2022/05/02 Python