JS实现五星好评效果 JS实现五星好评效果

用JS实现面向对象方法实现京东的五星好评效果。

文章图片

鼠标滑过时的显示：

文章图片

当评价完成后，关闭浏览器重新打开页面，还是上次的评价结果。用cookie实现。
具体实现如下：

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={}; //存储当前页面中所有的五星评价结果，一个商品为一组。用商品的id作为key，用商品评价组成一个数组，作为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中存储的评论结果并在创建每个评论时初始化score的值。this.initScore(); // 创建评价标签部分this.createLabel(); // 创建星星部分this.createStars(); // 创建分数部分this.createScore(); // 初始化星星样式。this.changeStarStyle(this.score-1); // 初始化分数this.changeScore(this.score); // 添加鼠标滑过点击事件。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) returnthis.index = this.starArr.indexOf(e.target); this.score = this.index+1; this.changeStarStyle(this.index); this.changeScore(this.index+1); // 每次点击都将评论的结果存储到cookie中，以便下次打开页面时读取。STARS_LIST中存储的是label作为key，score作为value的数据。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","店家服务态度=0","快递配送速度=0","快递员服务=0","快递包装=0"],"1002":["商品符合度=0","店家服务态度=0","快递配送速度=0","快递员服务=0","快递包装=0"]} // 解析cookie中存储的评论结果。if(!document.cookie.includes("comment=")) returnlet o = JSON.parse(document.cookie.match(/(\{.*?\})/)[1]); if(!o) return// 解析后的o如下// ["商品符合度=1", "店家服务态度=0", "快递配送速度=0", "快递员服务=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=https://www.it610.com/article/parseInt(arr[1]); return value; },0)}}}}

使用时传入标签，新建实例。

import Stars from './js/Stars.js'; let list=["商品符合度","店家服务态度","快递配送速度","快递员服务","快递包装"]; // let star = new Stars(list[0]); // star.appendTo("body"); list.forEach(item=>{// 传入标签和对应的商品idlet star = new Stars(item,"1001"); star.appendTo(".div1"); })list.forEach(item=>{let star = new Stars(item,"1002"); star.appendTo(".div2"); })

【JS实现五星好评效果】以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持脚本之家。