首页
所有分类
TAGS
文字工具 EMOJI BIBLE
编程 Javascript jQuery

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实现简单评论区功能

- Author -

一个快乐的程序媛

声明：登载此文出于传递更多信息之目的，并不意味着赞同其观点或证实其描述。

jQuery 相关文章推荐
jQuery使用JSONP实现跨域获取数据的三种方法详解
May 04 jQuery
jQuery中hover方法搭配css的hover选择器,实现选中元素突出显示方法
May 08 jQuery
jQuery插件select2利用ajax高效查询大数据列表（可搜索、可分页）
May 19 jQuery
jQuery用户头像裁剪插件cropbox.js使用详解
Jun 07 jQuery
浅谈事件冒泡、事件委托、jQuery元素节点操作、滚轮事件与函数节流
Jul 22 jQuery
jQuery实现简单日期格式化功能示例
Sep 19 jQuery
jQuery实现的form转json经典示例
Oct 10 jQuery
jQuery使用bind函数实现绑定多个事件的方法
Oct 11 jQuery
jQuery实现右侧抽屉式在线客服功能
Dec 25 jQuery
JQuery Ajax跨域调用和非跨域调用问题实例分析
Apr 16 jQuery
jQuery操作事件完整实例分析
Jan 10 jQuery
jQuery实现简单日历效果
Jul 05 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
TECSUN(1) 1 Tube Radio(1) 德生(17) YB217(1) 车机(1) 东方红(1) PL-365(1) 海燕B411(1) 修复(2) 再生机(1)
You might like
PHP初学者常见问题集合 修正版(21问答)
2010/03/23 PHP
php数组函数序列之array_intersect() 返回两个或多个数组的交集数组
2011/11/10 PHP
php读取csv文件并输出的方法
2015/03/14 PHP
在Mac OS上搭建Nginx+PHP+MySQL开发环境的教程
2015/12/21 PHP
php自定义函数转换html标签示例
2016/09/29 PHP
用php和jQuery来实现“顶”和“踩”的投票功能
2016/10/13 PHP
详解php用curl调用接口方法，get和post两种方式
2017/01/13 PHP
Javascript 写的简单进度条控件
2008/01/22 Javascript
ajax异步刷新实现更新数据库
2012/12/03 Javascript
jquery使用ajax实现微信自动回复插件
2014/04/28 Javascript
JavaScript使用slice函数获取数组部分元素的方法
2015/04/06 Javascript
Node.js中文件操作模块File System的详细介绍
2017/01/05 Javascript
javascript创建元素和删除元素实例小结
2019/06/19 Javascript
[26:40]DOTA2上海特级锦标赛A组资格赛#1 Secret VS MVP.Phx第一局
2016/02/25 DOTA
[39:19]完美世界DOTA2联赛PWL S2 SZ vs LBZS 第二场 11.26
2020/11/30 DOTA
Python基于pygame实现图片代替鼠标移动效果
2015/11/11 Python
详解django中自定义标签和过滤器
2017/07/03 Python
Python数据可视化库seaborn的使用总结
2019/01/15 Python
python pillow模块使用方法详解
2019/08/30 Python
python 生成器和迭代器的原理解析
2019/10/12 Python
python基于K-means聚类算法的图像分割
2019/10/30 Python
python创建学生管理系统
2019/11/22 Python
五分钟学会怎么用Pygame做一个简单的贪吃蛇
2021/01/06 Python
HTML5注册页面示例代码
2014/03/27 HTML / CSS
印度最大的网上花店：Ferns N Petals（鲜花、礼品和蛋糕）
2017/10/16 全球购物
幼儿园教师培训方案
2014/02/04 职场文书
校庆活动方案
2014/03/31 职场文书
感恩之星事迹材料
2014/05/03 职场文书
市级青年文明号申报材料
2014/05/26 职场文书
义和团口号
2014/06/17 职场文书
2015年新学期寄语
2015/02/26 职场文书
质量保证书格式
2015/02/27 职场文书
门球健将观后感
2015/06/16 职场文书
2015年小学体育教师工作总结
2015/10/23 职场文书
python数据库批量插入数据的实现(executemany的使用)
2021/04/30 Python
Java版 单机五子棋
2022/05/04 Java/Android