La estructura de archivos de todo el proyecto:
Imágenes utilizadas en la carpeta img
commstar.png ：
face-red.png:
Código 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();
}
}
código 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>
Lograr efecto
Cuando hace clic en las estrellas para puntuar por primera vez, actualice la página actual o vuelva a abrir la página después de cerrar completamente el navegador, el último resultado de puntuación aún existe y los datos de puntuación almacenados en caché se pueden ver en la cookie de la consola:
