JS實(shí)現(xiàn)五星好評(píng)效果
更新時(shí)間：2021年09月10日 11:04:39 作者：weixin_51276799
這篇文章主要為大家詳細(xì)介紹了JS實(shí)現(xiàn)五星好評(píng)效果，文中示例代碼介紹的非常詳細(xì)，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下
用JS實(shí)現(xiàn)面向?qū)ο蠓椒▽?shí)現(xiàn)京東的五星好評(píng)效果。
鼠標(biāo)滑過時(shí)的顯示：
當(dāng)評(píng)價(jià)完成后，關(guān)閉瀏覽器重新打開頁面，還是上次的評(píng)價(jià)結(jié)果。用cookie實(shí)現(xiàn)。
具體實(shí)現(xiàn)如下：
import Componenet from "./Component.js";
export default class Stars extends Componenet {
label;
STARS_NUM = 5;
starArr = [];
score = 0;
starsCon;
faceIcon;
scoreCon;
index = -1;
name;
static STARS_LIST={}; //存儲(chǔ)當(dāng)前頁面中所有的五星評(píng)價(jià)結(jié)果，一個(gè)商品為一組。用商品的id作為key，用商品評(píng)價(jià)組成一個(gè)數(shù)組，作為value。
date=new Date();
constructor(_label,_name) {
super("div");
this.name=_name;
this.label = _label;
Object.assign(this.elem.style, {
width:"200px",
height: "16px",
float: "left",
marginRight: "20px",
marginBottom: "10px",
fontSize: "12px",
color: "#666",
lineHeight: "16px",
userSelect: "none",
position: "relative",
top: "20px",
left: "20px",
})
// 解析cookie中存儲(chǔ)的評(píng)論結(jié)果并在創(chuàng)建每個(gè)評(píng)論時(shí)初始化score的值。
this.initScore();
// 創(chuàng)建評(píng)價(jià)標(biāo)簽部分
this.createLabel();
// 創(chuàng)建星星部分
this.createStars();
// 創(chuàng)建分?jǐn)?shù)部分
this.createScore();
// 初始化星星樣式。
this.changeStarStyle(this.score-1);
// 初始化分?jǐn)?shù)
this.changeScore(this.score);
// 添加鼠標(biāo)滑過點(diǎn)擊事件。
this.starsCon.addEventListener("mouseenter", e => this.mouseHandler(e));
this.starsCon.addEventListener("mouseleave", e => this.mouseHandler(e));
this.starsCon.addEventListener("mouseover", e => this.mouseHandler(e));
this.starsCon.addEventListener("click", e => this.clickHandler(e));
this.date.setFullYear(2021);
}
appendTo(_parent){
super.appendTo(_parent);
if(!Stars.STARS_LIST[this.name]) Stars.STARS_LIST[this.name]=[];
Stars.STARS_LIST[this.name].push(this.label+"="+this.score);
}
clickHandler(e){
if(e.target.constructor!==HTMLLIElement) return
this.index = this.starArr.indexOf(e.target);
this.score = this.index+1;
this.changeStarStyle(this.index);
this.changeScore(this.index+1);
// 每次點(diǎn)擊都將評(píng)論的結(jié)果存儲(chǔ)到cookie中，以便下次打開頁面時(shí)讀取。STARS_LIST中存儲(chǔ)的是label作為key，score作為value的數(shù)據(jù)。
this.storageScore();
}
storageScore(){
for(let prop in Stars.STARS_LIST){
if(prop === this.name){
Stars.STARS_LIST[prop].forEach((item,index)=>{
if(item.includes(this.label)) Stars.STARS_LIST[prop][index] = this.label+"="+this.score;
});
}
}
document.cookie="comment="+ JSON.stringify(Stars.STARS_LIST)+";expires="+this.date.toUTCString();
}
mouseHandler(e) {
switch (e.type) {
case "mouseenter":
this.faceIcon.style.display = "block";
break;
case "mouseleave":
this.faceIcon.style.display = "none";
this.changeStarStyle(this.index);
this.changeScore(this.score);
break;
case "mouseover":
let index = this.starArr.indexOf(e.target);
this.changeStarStyle(index);
this.changeScore(index + 1);
this.changeFaceStyle(index);
break;
}
}
changeStarStyle(_i) {
for (let n = 0; n < this.starArr.length; n++) {
if (n <= _i || n < this.score) {
this.starArr[n].style.backgroundPositionY = "-16px";
} else {
this.starArr[n].style.backgroundPositionY = "0px";
}
}
}
changeFaceStyle(_i) {
this.faceIcon.style.left = _i * 16 + "px";
this.faceIcon.style.backgroundPositionX = (_i + 1) * 20 + "px";
}
changeScore(_i) {
this.scoreCon.textContent = _i + "分";
}
createLabel() {
let label = document.createElement("span");
Object.assign(label.style, {
float: "left",
padding: "0 5px",
})
label.textContent = this.label;
this.elem.appendChild(label);
}
createStars() {
this.starsCon = document.createElement("ul");
Object.assign(this.starsCon.style, {
margin: 0,
padding: 0,
listStyle: "none",
width: "80px",
height: "16px",
float: "left",
position: "relative",
})
for (let i = 0; i < this.STARS_NUM; i++) {
let li = document.createElement("li");
Object.assign(li.style, {
width: "16px",
height: "16px",
float: "left",
backgroundImage: "url(./star_img/commstar.png)",
})
this.starArr.push(li);
this.starsCon.appendChild(li);
}
this.faceIcon = document.createElement("div");
Object.assign(this.faceIcon.style, {
width: "16px",
height: "16px",
backgroundImage: "url(./star_img/face-red.png)",
backgroundPositionX: "-80px",
position: "absolute",
left: "0",
top: "-16px",
display: "none",
})
this.starsCon.appendChild(this.faceIcon);
this.elem.appendChild(this.starsCon);
}
createScore() {
this.scoreCon = document.createElement("div");
Object.assign(this.scoreCon.style, {
height: "16px",
width:"20px",
float: "left",
padding: "0 5px",
})
this.scoreCon.textContent = this.score + "分",
this.elem.appendChild(this.scoreCon);
}
initScore(){
// 直接讀取cookie顯示如下
// comment={"1001":["商品符合度=5","店家服務(wù)態(tài)度=0","快遞配送速度=0","快遞員服務(wù)=0","快遞包裝=0"],"1002":["商品符合度=0","店家服務(wù)態(tài)度=0","快遞配送速度=0","快遞員服務(wù)=0","快遞包裝=0"]}
// 解析cookie中存儲(chǔ)的評(píng)論結(jié)果。
if(!document.cookie.includes("comment=")) return
let o = JSON.parse(document.cookie.match(/(\{.*?\})/)[1]);
if(!o) return
// 解析后的o如下
// ["商品符合度=1", "店家服務(wù)態(tài)度=0", "快遞配送速度=0", "快遞員服務(wù)=0", "快遞包裝=0"]
for(let prop in o){
if(this.name===prop){
this.score=o[prop].reduce((value,item,index)=>{
let arr=item.split("=");
if(arr[0].includes(this.label)) value=parseInt(arr[1]);
return value;
},0)
}
}
}
}
使用時(shí)傳入標(biāo)簽，新建實(shí)例。
import Stars from './js/Stars.js';
let list=["商品符合度","店家服務(wù)態(tài)度","快遞配送速度","快遞員服務(wù)","快遞包裝"];
// let star = new Stars(list[0]);
// star.appendTo("body");
list.forEach(item=>{
// 傳入標(biāo)簽和對(duì)應(yīng)的商品id
let star = new Stars(item,"1001");
star.appendTo(".div1");
})
list.forEach(item=>{
let star = new Stars(item,"1002");
star.appendTo(".div2");
})
以上就是本文的全部?jī)?nèi)容，希望對(duì)大家的學(xué)習(xí)有所幫助，也希望大家多多支持腳本之家。
相關(guān)文章
js實(shí)現(xiàn)盒子滾動(dòng)動(dòng)畫效果
這篇文章主要為大家詳細(xì)介紹了js實(shí)現(xiàn)盒子滾動(dòng)動(dòng)畫效果，文中示例代碼介紹的非常詳細(xì)，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下2020-08-08
JavaScript動(dòng)態(tài)改變HTML頁面元素例如添加或刪除
HTML頁面元素可以通過js動(dòng)態(tài)改變，比如可以向HTML中添加元素或刪除某個(gè)元素，下面為示例代碼，感興趣的朋友不要錯(cuò)過2014-08-08
JS雙向鏈表實(shí)現(xiàn)與使用方法示例(增加一個(gè)previous屬性實(shí)現(xiàn))
這篇文章主要介紹了JS雙向鏈表實(shí)現(xiàn)與使用方法,在之前鏈表的基礎(chǔ)上增加一個(gè)previous屬性實(shí)現(xiàn)的雙向鏈表功能,需要的朋友可以參考下2019-01-01
這篇文章主要介紹了詳解微信小程序軌跡回放實(shí)現(xiàn)及遇到的坑，文中通過示例代碼介紹的非常詳細(xì)，對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值，需要的朋友們下面隨著小編來一起學(xué)習(xí)學(xué)習(xí)吧2021-02-02
JavaScript數(shù)組常用方法解析及數(shù)組扁平化
這篇文章主要介紹了JavaScript數(shù)組常用方法解析及數(shù)組扁平化，數(shù)組作為在開發(fā)中常用的集合，除了for循環(huán)遍歷以外，還有很多內(nèi)置對(duì)象的方法，包括map，以及數(shù)組篩選元素filter等2022-07-07
微信h5靜默和非靜默授權(quán)獲取用戶openId的方法和步驟
這篇文章主要介紹了微信h5靜默和非靜默授權(quán)獲取用戶openId的方法和步驟，文中通過示例代碼介紹的非常詳細(xì)，對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值，需要的朋友們下面隨著小編來一起學(xué)習(xí)學(xué)習(xí)吧2020-06-06
Javascript寫了一個(gè)清除“l(fā)ogo1_.exe”的殺毒工具（可掃描目錄）
Javascript寫了一個(gè)清除“l(fā)ogo1_.exe”的殺毒工具（可掃描目錄）...2007-02-02
詳解小程序如何避免多次點(diǎn)擊，重復(fù)觸發(fā)事件
這篇文章主要介紹了詳解小程序如何避免多次點(diǎn)擊，重復(fù)觸發(fā)事件，小編覺得挺不錯(cuò)的，現(xiàn)在分享給大家，也給大家做個(gè)參考。一起跟隨小編過來看看吧2019-04-04
如何讓你的JavaScript函數(shù)更加優(yōu)雅詳解
在Js世界中有些操作會(huì)讓你無法理解，但是卻無比優(yōu)雅,下面這篇文章主要給大家介紹了關(guān)于如何讓你的JavaScript函數(shù)更加優(yōu)雅的相關(guān)資料,需要的朋友可以參考下2021-07-07
javaScript 動(dòng)態(tài)訪問JSon元素示例代碼
訪問JSon元素的方法有很多，在搜的時(shí)候會(huì)找到很多，本文使用javascript來動(dòng)態(tài)訪問json元素，感興趣的朋友可以練練手哦2013-08-08