Die Dateistruktur des gesamten Projekts:
Im Ordner img verwendete Bilder
commstar.png ：
face-red.png:
JS-Code
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 Quelltext
<!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>
Effekt erzielen
Wenn Sie zum ersten Mal auf die Sterne klicken, um zu punkten, die aktuelle Seite aktualisieren oder die Seite nach dem vollständigen Schließen des Browsers erneut öffnen, ist das letzte Ergebnis weiterhin vorhanden, und die zwischengespeicherten Bewertungsdaten werden im Cookie der Konsole angezeigt:
