The file structure of the entire project:
Pictures used in the img folder
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 code
<!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>
Achieve effect
When you click the stars to score for the first time, refresh the current page or open the page again after completely closing the browser, the last score result still exists, and the cached score data can be seen in the cookie of the console:
