使用jQuery實現(xiàn)一個簡單的評論區(qū)功能

發(fā)布時間：2020-10-27 14:55:26 來源：億速云閱讀：632 作者：Leah 欄目：開發(fā)技術(shù)

使用jQuery實現(xiàn)一個簡單的評論區(qū)功能？相信很多沒有經(jīng)驗的人對此束手無策，為此本文總結(jié)了問題出現(xiàn)的原因和解決方法，通過這篇文章希望你能解決這個問題。

直接看代碼吧

<!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="說點(diǎn)什么吧..." id="area" cols="30" rows="10"></textarea>
  <div>
  <span class="useCount">0</span>
  <span>/</span>
  <span>200</span>
  <button id="send">發(fā)布</button>
  </div>

 </div>
 <!-- 微博內(nèi)容列表 -->
 <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);
}

// ①點(diǎn)擊發(fā)布按鈕， 動態(tài)創(chuàng)建一個小li，放入文本框的內(nèi)容和刪除按鈕， 并且添加到ul 中。
//
// ②點(diǎn)擊的刪除按鈕，可以刪除當(dāng)前的微博留言。

//jQuery入口
$(function () {
 //名字?jǐn)?shù)組
 var nameArr = ["百里守約", "孫悟空", "紫霞", "安琪拉", "妲己"];
 //名字對應(yīng)下標(biāo) 也是要生成的隨機(jī)數(shù)的數(shù)組
 var newArr = [];
 //本地存儲數(shù)據(jù) 對象數(shù)組
 var bd_arr = [];
 //每次刷新頁面 或者一進(jìn)入頁面 有歷史記錄就要顯示出來
 getItem();
 //發(fā)布按鈕 用on()綁定點(diǎn)擊事件
 $("#send").on("click", function () {
  //檢測有沒有輸入內(nèi)容 有內(nèi)容允許發(fā)布 否則提示
  if ($(this).parents().siblings("#area").val() == "") {
   alert("少俠，寫點(diǎn)什么再發(fā)布吧~");
  } else {
   //獲取要存儲的新的數(shù)據(jù)
   var name = nameArr[arfa()];
   var time = getTime();
   var nr = $(this).parents().siblings("#area").val();
   //要存儲的數(shù)據(jù) 以對象的形式放在數(shù)組里
   bd_arr.push({name: name, time: time, nr: nr});
   //轉(zhuǎn)成字符串
   var str = JSON.stringify(bd_arr);
   //向本地申請空間 存起來
   localStorage.setItem('li', str);
   //刷新數(shù)據(jù) 再顯示最新的所有l(wèi)i
   getItem();
   //文本框置空
   $("#area").val("");
   //輸入的字符置0
   $(".useCount").html("0");
   //發(fā)布完成 禁用按鈕
   $("#send").prop("disabled", true);
  }
 });

 //可以綁定多個事件 用對象的方式 輸入框綁定input,focus,,blur事件
 $("#area").on({
  input: function () {
   // 輸入內(nèi)容小于0禁用發(fā)布按鈕
   if ($(this).val().length === 0) {
    $(".useCount").html("0");
    $("#send").prop("disabled", true);
   } else if ($(this).val().length > 200) { //大于最大輸入值 只取前200個字符做有效值
    $(this).val($(this).val()&#63;.substring(0, 200));
   } else {
    //在有效范圍內(nèi) 解禁發(fā)布按鈕
    $("#send").prop("disabled", false);
    //實時顯示用戶輸入的字符數(shù)
    $(".useCount").html($(this).val().length);
   }
  },
  focus: function () {
   //重新獲得焦點(diǎn) 解禁發(fā)布按鈕 禁用刪除按鈕
   $("#send").prop("disabled", false);
   $("li").each(function (index, ele) {
    $(ele).find("#remove").prop("disabled", true);
   });
  },
  blur: function () {
   //失去焦點(diǎn) 解禁 刪除按鈕
   $("li").each(function (index, ele) {
    $(ele).find("#remove").prop("disabled", false);
   });
  }
 });

 //獲取當(dāng)時時間
 function getTime() {
  var data = new Date();
  return (data.getFullYear() + "-" + (data.getMonth() + 1) + "-" + data.getDate() + " " + data.getHours() + "時" + data.getMinutes() + "分" + data.getSeconds() + "秒");
 }

 //生成隨機(jī)數(shù) 去重
 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;
 }

 //讀取本地數(shù)據(jù)
 function getItem() {
  var name_arr = [];
  var time_arr = [];
  var nr_arr = [];
  var li_str = null;
  //讀取本地數(shù)據(jù)
  var str = localStorage.getItem('li');
  if (str != null) {
   //字符串?dāng)?shù)組轉(zhuǎn)換為 對象數(shù)組
   bd_arr = JSON.parse(str);
   // 循環(huán)遍歷
   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;
   }
   //根據(jù)取出的數(shù)據(jù) 動態(tài)創(chuàng)建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>" + "發(fā)布于：" + time_arr[i] + "</p>" +
     "</div>" +
     "<div class='content'>" + nr_arr[i] + "</div>" +
     "<button id='remove'>" + "刪除" + "</button>" +
     "</li>" +
     li_str
    ;
   }
   //因為有數(shù)據(jù)更新要覆蓋顯示 所以用了html方式添加li fadeTo()淡入效果
   $("ul").html($(li_str)).children().stop().fadeTo(1000, 1);
   //在剛進(jìn)入頁面 沒有發(fā)布按鈕的點(diǎn)擊事件時 刪除按鈕也要好用 所以這里也要綁定點(diǎn)擊事件
   //給刪除按鈕綁定 點(diǎn)擊事件 因為li動態(tài)生成的 要在生成之后立馬綁定事件
   $("li button").each(function (i, e) {
    $(e).on("click", function () {
     $(this).parents("li").remove();
     //要刪除的數(shù)據(jù) 在數(shù)組里找到并刪除
     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()
     });
     //轉(zhuǎn)成字符串
     str = JSON.stringify(bd_arr);
     //覆蓋刪除前的數(shù)據(jù)
     localStorage.setItem('li', str);
    });
   });
  }
 }
});

其實這個小案例的核心呢就是jQuery動態(tài)創(chuàng)建，localStorage本地存儲，本地數(shù)據(jù)的存入和取出，要用JSON.parse()和JSON.stringify()來進(jìn)行轉(zhuǎn)換，然后我是用了對象數(shù)組的方式存儲的，然后有新數(shù)據(jù)要存入和有數(shù)據(jù)要被刪除時用了push()和pop()，要注意數(shù)組中的每一個都是一個對象等等…
然后就是各種用on()綁定事件，還有動態(tài)創(chuàng)建的元素，要注意綁定事件的時機(jī)，事件處理無非就寫了控制最大輸入字符數(shù)，必須輸入一些才能點(diǎn)擊發(fā)布，文本框獲得焦點(diǎn)和失去焦點(diǎn)激活或者禁用哪個按鈕什么的等等。

看看效果吧，我多錄了兩個效果圖，感覺整體還算可以，但是代碼還是有超級大優(yōu)化空間的，就暫時不要在意這么多好了~~~慢慢來

使用jQuery實現(xiàn)一個簡單的評論區(qū)功能