jQuery实现简单评论区功能


Posted in jQuery onOctober 26, 2020

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

直接看代码吧

<!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/weibo.css" >
</head>

<body>
 <div class="w">
 <!-- 操作的界面 -->
 <div class="controls">
  <img src="images/tip.png" alt=""><br>
  <textarea placeholder="说点什么吧..." id="area" cols="30" rows="10"></textarea>
  <div>
  <span class="useCount">0</span>
  <span>/</span>
  <span>200</span>
  <button id="send">发布</button>
  </div>

 </div>
 <!-- 微博内容列表 -->
 <div class="contentList">
  <ul>

  </ul>
 </div>
 </div>
 <script src="js/jquery.min.js"></script>
 <script src="js/weibo.js"></script>
</body>

</html>
* {
 margin: 0;
 padding: 0;
}
ul {
 list-style: none;
}
.w {
 width: 900px;
 margin:0 auto;
}
.controls textarea {
 width: 878px;
 height: 100px;
 resize: none;
 border-radius: 10px;
 outline:none;
 padding-left: 20px;
 padding-top:10px;
 font-size: 18px;
}
.controls {
 overflow: hidden;
}

.controls div {
 float: right;
}
.controls div span {
 color:#666;
}
.controls div .useCount {
 color:red;
}
.controls div button {
 width: 100px;
 outline: none;
 border:none;
 background: rgb(0, 132, 255);
 height: 30px;
 cursor: pointer;
 color:#fff;
 font:bold 14px '宋体';
 transition: all 0.5s;
}
.controls div button:hover {
 background: rgb(0, 225, 255);
}
.controls div button:disabled {
 background: rgba(0, 225, 255,0.5);
}
.contentList {
 margin-top:50px;
 position: relative;
}
.contentList li {
 padding: 20px 0;
 position: relative;
 opacity: 0;
 border-bottom: 1px dashed #ccc;
}
.contentList li .info {
 position: relative;
}
.contentList li .info span {
 position: absolute;
 top:15px;
 left:100px;
 font:bold 16px '宋体';
}
.contentList li .info p {
 position: absolute;
 top:40px;
 left: 100px;
 color:#aaa;
 font-size: 12px;
}
.contentList img {
 width: 80px;
 border-radius: 50%;
}
.contentList li .content {
 padding-left: 100px;
 color: #666;
 word-break: break-all;
}
.contentList li button {
 width: 50px;
 height: 30px;
 text-align: center;
 line-height: 30px;
 color: white;
 background-color: #0084FF;
 border: 0;
 outline: none;
 cursor: pointer;
 position: absolute;
 right: 0;
 bottom: 10px;
}
.contentList li button:disabled{
 background: rgba(0, 225, 255,0.5);
}
.contentList li button:hover {
 background: rgb(0, 225, 255);
}
// ①点击发布按钮, 动态创建一个小li,放入文本框的内容和删除按钮, 并且添加到ul 中。
//
// ②点击的删除按钮,可以删除当前的微博留言。

//jQuery入口
$(function () {
 //名字数组
 var nameArr = ["百里守约", "孙悟空", "紫霞", "安琪拉", "妲己"];
 //名字对应下标 也是要生成的随机数的数组
 var newArr = [];
 //本地存储数据 对象数组
 var bd_arr = [];
 //每次刷新页面 或者一进入页面 有历史记录就要显示出来
 getItem();
 //发布按钮 用on()绑定点击事件
 $("#send").on("click", function () {
  //检测有没有输入内容 有内容允许发布 否则提示
  if ($(this).parents().siblings("#area").val() == "") {
   alert("少侠,写点什么再发布吧~");
  } else {
   //获取要存储的新的数据
   var name = nameArr[arfa()];
   var time = getTime();
   var nr = $(this).parents().siblings("#area").val();
   //要存储的数据 以对象的形式放在数组里
   bd_arr.push({name: name, time: time, nr: nr});
   //转成字符串
   var str = JSON.stringify(bd_arr);
   //向本地申请空间 存起来
   localStorage.setItem('li', str);
   //刷新数据 再显示最新的所有li
   getItem();
   //文本框置空
   $("#area").val("");
   //输入的字符置0
   $(".useCount").html("0");
   //发布完成 禁用按钮
   $("#send").prop("disabled", true);
  }
 });

 //可以绑定多个事件 用对象的方式 输入框绑定input,focus,,blur事件
 $("#area").on({
  input: function () {
   // 输入内容小于0禁用发布按钮
   if ($(this).val().length === 0) {
    $(".useCount").html("0");
    $("#send").prop("disabled", true);
   } else if ($(this).val().length > 200) { //大于最大输入值 只取前200个字符做有效值
    $(this).val($(this).val()?.substring(0, 200));
   } else {
    //在有效范围内 解禁发布按钮
    $("#send").prop("disabled", false);
    //实时显示用户输入的字符数
    $(".useCount").html($(this).val().length);
   }
  },
  focus: function () {
   //重新获得焦点 解禁发布按钮 禁用删除按钮
   $("#send").prop("disabled", false);
   $("li").each(function (index, ele) {
    $(ele).find("#remove").prop("disabled", true);
   });
  },
  blur: function () {
   //失去焦点 解禁 删除按钮
   $("li").each(function (index, ele) {
    $(ele).find("#remove").prop("disabled", false);
   });
  }
 });

 //获取当时时间
 function getTime() {
  var data = new Date();
  return (data.getFullYear() + "-" + (data.getMonth() + 1) + "-" + data.getDate() + " " + data.getHours() + "时" + data.getMinutes() + "分" + data.getSeconds() + "秒");
 }

 //生成随机数 去重
 function arfa() {
  if (newArr.length === 0) {
   for (var i = 0; i < nameArr.length; i++) {
    newArr[newArr.length] = i;
   }
  }
  var num = Math.floor(Math.random() * nameArr.length);
  while (1) {
   if (newArr.indexOf(num) !== -1) {
    newArr.splice(newArr.indexOf(num), 1);
    break;
   } else {
    num = Math.floor(Math.random() * nameArr.length);
    continue;
   }
  }
  return num;
 }

 //读取本地数据
 function getItem() {
  var name_arr = [];
  var time_arr = [];
  var nr_arr = [];
  var li_str = null;
  //读取本地数据
  var str = localStorage.getItem('li');
  if (str != null) {
   //字符串数组转换为 对象数组
   bd_arr = JSON.parse(str);
   // 循环遍历
   for (var i = 0; i < bd_arr.length; i++) {
    // 取出一个对象
    var obj = bd_arr[i]; // {name:"...",time:"...",nr:"。。。"}
    name_arr[name_arr.length] = obj.name;
    time_arr[time_arr.length] = obj.time;
    nr_arr[nr_arr.length] = obj.nr;
   }
   //根据取出的数据 动态创建li
   for (var i = 0; i < name_arr.length; i++) {
    li_str = "<li>" +
     "<div class='info'>" +
     "<img src='images/03.jpg'>" +
     "<span>" + name_arr[i] + "</span>" +
     "<p>" + "发布于:" + time_arr[i] + "</p>" +
     "</div>" +
     "<div class='content'>" + nr_arr[i] + "</div>" +
     "<button id='remove'>" + "删除" + "</button>" +
     "</li>" +
     li_str
    ;
   }
   //因为有数据更新要覆盖显示 所以用了html方式添加li fadeTo()淡入效果
   $("ul").html($(li_str)).children().stop().fadeTo(1000, 1);
   //在刚进入页面 没有发布按钮的点击事件时 删除按钮也要好用 所以这里也要绑定点击事件
   //给删除按钮绑定 点击事件 因为li动态生成的 要在生成之后立马绑定事件
   $("li button").each(function (i, e) {
    $(e).on("click", function () {
     $(this).parents("li").remove();
     //要删除的数据 在数组里找到并删除
     bd_arr.pop({
      name: $(this).parents("li").find(".info span").html(),
      time: $(this).parents("li").find(".info p").html().substr(4),
      nr: $(this).parents("li").find(".content").html()
     });
     //转成字符串
     str = JSON.stringify(bd_arr);
     //覆盖删除前的数据
     localStorage.setItem('li', str);
    });
   });
  }
 }
});

其实这个小案例的核心呢就是jQuery动态创建,localStorage本地存储,本地数据的存入和取出,要用JSON.parse()和JSON.stringify()来进行转换,然后我是用了对象数组的方式存储的,然后有新数据要存入和有数据要被删除时用了push()和pop(),要注意数组中的每一个都是一个对象等等…
然后就是各种用on()绑定事件,还有动态创建的元素,要注意绑定事件的时机,事件处理无非就写了控制最大输入字符数,必须输入一些才能点击发布,文本框获得焦点和失去焦点激活或者禁用哪个按钮什么的等等。

看看效果吧,我多录了两个效果图,感觉整体还算可以,但是代码还是有超级大优化空间的,就暂时不要在意这么多好了~~~慢慢来

jQuery实现简单评论区功能
jQuery实现简单评论区功能
jQuery实现简单评论区功能
jQuery实现简单评论区功能
jQuery实现简单评论区功能

好了,就这些

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

jQuery 相关文章推荐
jQuery设置图片等比例缩小的方法
Apr 29 jQuery
jQuery+PHP+Mysql实现抽奖程序
Apr 12 jQuery
jQuery实现下拉菜单的实例代码
Jun 19 jQuery
jQuery+Ajax请求本地数据加载商品列表页并跳转详情页的实现方法
Jul 12 jQuery
JQuery实现table中tr上移下移的示例(超简单)
Jan 08 jQuery
jQuery.extend 与 jQuery.fn.extend的用法及区别实例分析
Jul 25 jQuery
jquery+php后台实现省市区联动功能示例
May 23 jQuery
jQuery实现轮播图源码
Oct 23 jQuery
jQuery实现验证用户登录
Dec 10 jQuery
jQuery HTML设置内容和属性操作实例分析
May 20 jQuery
jQuery+ThinkPHP实现图片上传
Jul 23 jQuery
jQuery实现简单评论区功能
Oct 26 jQuery
jquery插件懒加载的示例
Oct 24 #jQuery
jquery实现异步文件上传ajaxfileupload.js
Oct 23 #jQuery
jquery实现抽奖功能
Oct 22 #jQuery
jQuery实现可以计算进制转换的计算器
Oct 19 #jQuery
jQuery实现计算器功能
Oct 19 #jQuery
jQuery实现推拉门效果
Oct 19 #jQuery
jQuery实现图片切换效果
Oct 19 #jQuery
You might like
简单的用PHP编写的导航条程序
2006/10/09 PHP
基于php(Thinkphp)+jquery 实现ajax多选反选不选删除数据功能
2017/02/24 PHP
PHP实现在windows下配置sendmail并通过mail()函数发送邮件的方法
2017/06/20 PHP
PHP封装mysqli基于面向对象的mysql数据库操作类与用法示例
2019/02/25 PHP
js下弹出窗口的变通
2007/04/18 Javascript
JQuery的ON()方法支持的所有事件罗列
2015/02/28 Javascript
将JSON字符串转换成Map对象的方法
2016/11/30 Javascript
Bootstrap源码学习笔记之bootstrap进度条
2016/12/24 Javascript
手动初始化Angular的模块与控制器
2016/12/26 Javascript
Node.JS文件系统解析实例详解
2017/05/15 Javascript
Vue自定义事件(详解)
2017/08/19 Javascript
微信小程序入门之广告条实现方法示例
2018/12/05 Javascript
JavaScript实现动态添加、移除元素或属性的方法分析
2019/01/03 Javascript
js 递归json树实现根据子id查父id的方法分析
2019/11/08 Javascript
angular组件间通讯的实现方法示例
2020/05/07 Javascript
Python ORM框架SQLAlchemy学习笔记之数据查询实例
2014/06/10 Python
在Python下进行UDP网络编程的教程
2015/04/29 Python
图解Python变量与赋值
2018/04/03 Python
python监控文件并且发送告警邮件
2018/06/21 Python
python SQLAlchemy 中的Engine详解
2019/07/04 Python
python cv2读取rtsp实时码流按时生成连续视频文件方式
2019/12/25 Python
Python random库使用方法及异常处理方案
2020/03/02 Python
python GUI库图形界面开发之PyQt5滚动条控件QScrollBar详细使用方法与实例
2020/03/06 Python
Django media static外部访问Django中的图片设置教程
2020/04/07 Python
Matplotlib.pyplot 三维绘图的实现示例
2020/07/28 Python
使用Filters滤镜弥补CSS3的跨浏览器问题以及兼容低版本IE
2013/01/23 HTML / CSS
Champion澳大利亚官网:美国冠军运动服装
2018/05/07 全球购物
Lancer Skincare官方网站:抗衰老皮肤护理
2020/11/20 全球购物
银行员工职业规划范文
2014/01/21 职场文书
2014年消防工作实施方案
2014/02/20 职场文书
幼儿评语大全
2014/04/30 职场文书
多媒体教室标语
2014/06/26 职场文书
党的生日演讲稿
2014/09/10 职场文书
教师求职信怎么写
2015/03/20 职场文书
工作态度恶劣检讨书
2015/05/06 职场文书
Python爬虫之爬取某文库文档数据
2021/04/21 Python