jQuery實(shí)現(xiàn)簡單評論區(qū)功能
更新時間：2020年10月26日 10:40:51 作者：一個快樂的程序媛
這篇文章主要為大家詳細(xì)介紹了jQuery實(shí)現(xiàn)簡單評論區(qū)功能，文中示例代碼介紹的非常詳細(xì)，具有一定的參考價值，感興趣的小伙伴們可以參考一下
本文實(shí)例為大家分享了jQuery實(shí)現(xiàn)簡單評論區(qū)的具體代碼，供大家參考，具體內(nèi)容如下
直接看代碼吧
<!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()?.substring(0, 200));
} else {
//在有效范圍內(nèi) 解禁發(fā)布按鈕
$("#send").prop("disabled", false);
//實(shí)時顯示用戶輸入的字符數(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;
}
//讀取本地?cái)?shù)據(jù)
function getItem() {
var name_arr = [];
var time_arr = [];
var nr_arr = [];
var li_str = null;
//讀取本地?cái)?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
;
}
//因?yàn)橛袛?shù)據(jù)更新要覆蓋顯示 所以用了html方式添加li fadeTo()淡入效果
$("ul").html($(li_str)).children().stop().fadeTo(1000, 1);
//在剛進(jìn)入頁面 沒有發(fā)布按鈕的點(diǎn)擊事件時 刪除按鈕也要好用 所以這里也要綁定點(diǎn)擊事件
//給刪除按鈕綁定 點(diǎn)擊事件 因?yàn)閘i動態(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);
});
});
}
}
});
其實(shí)這個小案例的核心呢就是jQuery動態(tài)創(chuàng)建，localStorage本地存儲，本地?cái)?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)化空間的，就暫時不要在意這么多好了~~~慢慢來
好了，就這些
以上就是本文的全部內(nèi)容，希望對大家的學(xué)習(xí)有所幫助，也希望大家多多支持腳本之家。
您可能感興趣的文章:
- jquery 新浪網(wǎng)易的評論塊制作
- jquery實(shí)現(xiàn)仿新浪微博評論滾動效果
- 基于jquery實(shí)現(xiàn)ajax無刷新評論
- jQuery實(shí)現(xiàn)的簡單無刷新評論功能示例
- jQuery 實(shí)現(xiàn)評論等級好評差評特效
- JQuery實(shí)現(xiàn)動態(tài)添加刪除評論的方法
- PHP結(jié)合jQuery實(shí)現(xiàn)的評論頂、踩功能
- jQuery基于ajax實(shí)現(xiàn)星星評論代碼
- C#使用jQuery實(shí)現(xiàn)無刷新評論提交的方法
- 基于jQuery實(shí)現(xiàn)的美觀星級評論打分組件代碼
相關(guān)文章
擴(kuò)展對input的一些方法(練習(xí)jQuery插件)2009-10-10
jquery使用淘寶接口跨域查詢手機(jī)號碼歸屬地實(shí)例
這篇文章主要介紹了jquery使用淘寶接口跨域查詢手機(jī)號碼歸屬地的方法，大家參考使用吧2013-11-11
web前端開發(fā)JQuery常用實(shí)例代碼片段(50個)
本文給大家展示50個jquery代碼片段，這些代碼能夠給你的javascript項(xiàng)目提供幫助，需要的朋友快來學(xué)習(xí)一下吧2015-08-08
jQuery提供css()的方法來實(shí)現(xiàn)嵌入式改變元素樣式，css()方法在使用上具有多樣性。2010-02-02
jquery實(shí)現(xiàn)簡單Tab切換菜單效果
這篇文章主要介紹了jquery實(shí)現(xiàn)簡單Tab切換菜單效果的相關(guān)資料,需要的朋友可以參考下2016-06-06
如何確保JavaScript的執(zhí)行順序 之jQuery.html深度分析
在上一篇文章《如何確保JavaScript的執(zhí)行順序 - 之實(shí)戰(zhàn)篇》中，我們發(fā)現(xiàn)jQuery的html函數(shù)能夠確保動態(tài)加載的JavaScript按照引入順序執(zhí)行。2011-03-03
本文主要介紹了JQuery實(shí)現(xiàn)兩個下拉框數(shù)據(jù)移動，追加,需要的朋友可以參考下2014-04-04
Easyui和zTree兩種方式分別實(shí)現(xiàn)樹形下拉框
最近工作中需要用到樹形下拉框，因?yàn)轫?xiàng)目中樹形結(jié)構(gòu)使用的是zTree，效果不是很好看，于是想著使用easyui的comboTree，雖然效果達(dá)到了，但是風(fēng)格和bootstrap不搭，下面把這兩種方式的效果分享到腳本之家平臺供大家參考2017-08-08
今閑著無聊 順便看了下jquery ui的拖拽插件，實(shí)現(xiàn)拖拽的方法很簡單，看到效果后興奮小下...2010-11-11
jQuery獲取及設(shè)置表單input各種類型值的方法小結(jié)
這篇文章主要介紹了jQuery獲取及設(shè)置表單input各種類型值的方法,總結(jié)分析了jQuery針對表單元素的各種常見操作技巧,非常簡單實(shí)用,需要的朋友可以參考下2016-05-05