话不多说直接上代码
component.js文件export default class Component{elem;constructor(){this.elem=this.createElem();}createElem(){if(this.elem) return this.elem;let div=document.createElement("div");return div;}appendTo(parent){if(typeof parent === "string") parent=document.querySelector(parent);parent.appendChild(this.elem);}}
star.js文件import Component from "./Component.js"export default class Star extends Component{static STAR_NUM=5;static stararr=[];label;scoreElem;faceElem;type;pos=-1;score=0;showY=0;starList=[];constructor(_label,_type){super();this.label=_label;this.type=_typethis.createStar();let obj=this.getCookie();for(let prop in obj){if(prop===this.label){// console.log(this.label)// console.log(obj[prop])// this.changeScore(obj[prop]);// this.changeStar(obj[prop]-1)// console.log(this.starList[obj[prop]-1])this.score=obj[prop]this.pos=obj[prop]-1let evt=new Event("click");this.starList[obj[prop]-1].dispatchEvent(evt)this.changeScore(obj[prop])}}}createStar(){let template=document.createDocumentFragment();Object.assign(this.elem.style,{paddingTop:"16px",height:"16px",display:"inline-block",marginLeft:"20px"})this.createLabel(template);this.createStarCon(template);this.createScore(template);this.elem.appendChild(template)}createLabel(template){let span=document.createElement("span");span.textContent=this.label;Object.assign(span.style,{height:"16px",float:"left"})template.appendChild(span)}createStarCon(template){let div=document.createElement("div");Object.assign(div.style,{float:"left",position:"relative",top:"1px",left:"5px"});for(let i=0;i<Star.STAR_NUM;i++){let span=document.createElement("span");Object.assign(span.style,{width:"16px",height:"16px",display:"block",float:"left",backgroundImage:"url(./img/commstar.png)",backgroundPosition: "0px 0px"})span.addEventListener("mouseover",e=>{this.mouseHandler(e)});span.addEventListener("mouseleave",e=>{this.mouseHandler(e)});span.addEventListener("click",e=>{this.mouseHandler(e)})this.starList.push(span);div.appendChild(span);}let face=document.createElement("div");Object.assign(face.style,{width:"16px",height:"16px",position:"absolute",top:"-16px",left:this.pos*(-16)+"px",backgroundImage:"url(./img/face-red.png)",backgroundPosition:(Star.STAR_NUM-this.pos-1)*(-20)+"px 0px",display:"none"})this.faceElem=face;div.appendChild(face)template.appendChild(div)}createScore(template){let span=document.createElement("span");this.scoreElem=span;span.textContent=this.score+"分";span.style.paddingLeft="10px"template.appendChild(span);}mouseHandler(e){switch(e.type){case "click":case "mouseover":let index=this.starList.indexOf(e.target);// console.log(index)// console.log(this.pos)if(index<0) return;if(e.type==="click"){this.pos=index;// console.log(this.pos)// this.dispatch();}else{this.changeScore(index+1);this.changeFace(index);} this.changeStar(index);if(e.type==="click"){let date=new Date();date.setMonth(11);let data={};data[this.type]={};data[this.type][this.label]=this.score;Star.stararr.push(data);this.setCookie(data[this.type],date);}break;case "mouseleave":this.changeStar(this.pos);this.changeScore(this.pos+1);this.changeFace(-1);break;}}changeScore(n){if(n===0){this.scoreElem.style.color="rgb(102, 102, 102)"return}this.score=n;this.scoreElem.textContent=n+"分";this.scoreElem.style.color="red"}changeFace(n){if(n<0) this.faceElem.style.display="none";else{this.faceElem.style.display="block";this.faceElem.style.left=n*16+"px";this.faceElem.style.backgroundPosition=(Star.STAR_NUM-n-1)*(-20)+"px 0px"}}changeStar(n){for(let i=0;i<this.starList.length;i++){if(i<=n||i<=this.pos)this.starList[i].style.backgroundPosition="0px -16px";else this.starList[i].style.backgroundPosition="0px 0px";}}setCookie(data,date){var str=date===undefined ? "" : ";expires="+date.toUTCString();for(var prop in data){var value=data[prop]if(typeof value==="object" && value!==null) value=JSON.stringify(value);document.cookie=prop+"="+value+str;}}getCookie(){if(document.cookie.length===0) return {}return document.cookie.split(";").reduce((value,item)=>{var arr=item.split("=");var v=arr[1].trim();try{v=JSON.parse(v);}catch(e){}value[arr[0].trim()]=v;return value;},{})}}
index.html文件<!DOCTYPE html><html lang="en"><head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>五星好评</title><style>html{font: 12px / 150% tahoma, arial, "Microsoft YaHei", "Hiragino Sans GB", 宋体, sans-serif;color: rgb(102, 102, 102);}*{margin: 0;padding: 0;list-style: none;}#box1,#box2{margin-left: 20px;}#box2{margin-top: 100px;}</style></head><body><div id="box1">第一次单击的元素 <hr></div><div id="box2">关闭页面后再打开第二次单击的元素 <hr></div><script type="module">import Star from "./js/Star.js";let box1=document.querySelector("#box1")let box2=document.querySelector("#box2")let arr1=["服务态度","哈哈","嘻嘻"]let arr2=["服务态度2","哈哈2","嘻嘻2"]arr1.forEach((item)=>{let star1=new Star(item,"type1");star1.appendTo(box1);})arr2.forEach((item)=>{let star2=new Star(item,"type2");star2.appendTo(box2);})console.log(Star.stararr)var arr=Star.stararr;// box1.dispatchEvent</script></body></html>
文中使用了两张图片
下面是效果图：
