整個專案的檔案結構：
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"/>
轉載請註明出處，本文鏈接：https://www.uj5u.com/qita/201047.html
標籤：其他
上一篇：JavaScript入門萌新須知