整个项目的文件结构：
img文件夹中使用的图片
commstar.png：
face-red.png:
JS代码
export default class Star {elem;label;name;starCon;face;score;pos = -1;starList = [];static STAR_NUM = 5;static SCORELIST = {};// 初始化constructor(_label) {this.label = _label;this.elem = this.createElem();Object.assign(this.elem.style, {margin: "20px",float: "left",fontSize: "12px",});if (!Star.SCORELIST[this.label]) Star.SCORELIST[this.label] = 0;this.getCookie();this.createLabel(this.elem);this.createStar(this.elem);this.createScore(this.elem);this.changeStar(this.pos);this.changeScore(this.pos + 1);}// 创建整个组件对应的容器元素createElem() {if (this.elem) return this.elem;let div = document.createElement("div");return div;}// 将当前实例化对象添加到parent中appendTo(parent) {if (typeof parent === "string") parent = document.querySelector(parent);parent.appendChild(this.elem);}// 获取cookie中存储的评分数据getCookie() {if (document.cookie.length < 0) return;var arr = document.cookie.split(";");arr.forEach((item) => {var arr1 = item.split("=");if (arr1[0].trim() === "scoreList") arr = arr1[1];});try {var obj = JSON.parse(arr);} catch (e) {return;}for (var prop in obj) {if (this.label === prop) {this.pos = obj[prop] - 1;Star.SCORELIST[this.label] = obj[prop];return;}}}// 创建评价的名称部分createLabel(parent) {this.name = document.createElement("div");this.name.textContent = this.label;Object.assign(this.name.style, {float: "left",height: "16px",});parent.appendChild(this.name);}// 创建星星部分createStar(parent) {this.starCon = document.createElement("div");Object.assign(this.starCon.style, {float: "left",width: 16 * Star.STAR_NUM + "px",height: "16px",margin: "0 10px",position: "relative",});for (var i = 0; i < Star.STAR_NUM; i++) {var star = document.createElement("span");Object.assign(star.style, {width: "16px",height: "16px",backgroundImage: "url(./img/commstar.png)",float: "left",});this.starList.push(star);this.starCon.appendChild(star);}this.face = document.createElement("span");Object.assign(this.face.style, {width: "16px",height: "16px",backgroundImage: "url(./img/face-red.png)",position: "absolute",left: 0,top: "-18px",display: "none",});this.starCon.appendChild(this.face);parent.appendChild(this.starCon);this.starCon.addEventListener("mouseover", (e) => this.mouseHandler(e));this.starCon.addEventListener("mouseleave", (e) => this.mouseHandler(e));this.starCon.addEventListener("click", (e) => this.mouseHandler(e));}// 创建分数部分createScore(parent) {this.score = document.createElement("span");this.score.textContent = "0分";this.score.style.float = "left";this.score.style.color = "#999";parent.appendChild(this.score);}// 鼠标事件的回调函数mouseHandler(e) {switch (e.type) {case "click":case "mouseover":var index = this.starList.indexOf(e.target);if (index < 0) return;if (e.type === "click") {this.pos = index;this.setCookie();} else {this.changeFace(index);this.changeScore(index + 1);}this.changeStar(index);break;case "mouseleave":this.changeFace(-1);this.changeScore(this.pos + 1);this.changeStar(this.pos);}}// 改变星星的样式changeStar(n) {this.starList.forEach((item, index) => {if (index <= this.pos || index <= n) {item.style.backgroundPositionY = "-16px";} else {item.style.backgroundPositionY = "0";}});}// 改变表情的样式changeFace(n) {if (n < 0) {return (this.face.style.display = "none");} else {var index = Star.STAR_NUM - n - 1;Object.assign(this.face.style, {display: "block",backgroundPositionX: -20 * index + "px",left: n * 16 + "px",});}}// 改变分数changeScore(n) {if (n < 0) n = 0;if (n > Star.STAR_NUM) n = Star.STAR_NUM;this.score.textContent = n + "分";if (n > 0) this.score.style.color = "red";else this.score.style.color = "#999";}// 使用cookie存储评分数据setCookie() {Star.SCORELIST[this.label] = this.pos + 1;var scoreList = JSON.stringify(Star.SCORELIST);var date = new Date();var year = date.getFullYear();var month = date.getMonth();if (month === 11) {month = 1;year++;} else {month++;}date.setFullYear(year);date.setMonth(month);document.cookie ="scoreList=" + scoreList + ";expires=" + date.toUTCString();}}
html代码
<!DOCTYPE html><html lang="en"><head><meta charset="UTF-8" /><meta name="viewport" content="width=device-width, initial-scale=1.0" /><title>五星好评</title></head><body><script type="module">import Star from "./js/Star.js";let list = ["商品符合度","店家服务态度","快递配送速度","快递员服务","快递包装",];list.forEach((item) => {let star = new Star(item);star.appendTo("body");});</script></body></html>
实现效果
当第一次点击星星评分以后，刷新当前页面或者彻底关闭浏览器以后再次打开页面，上次的评分结果依旧存在，可以在控制台的cookie中看到缓存的评分数据：
