效果图如下：
思路：1、通过构造函数传入所需要的数据：所要创建的标签名和cookie的内容；
2、创建标签名、五星、评分部分；
3、执行初始化函数，读取cookie中的内容，显示上次选定的评分。
注意点：1、鼠标经过时显示相应的表情，由于背景图片中的表情顺序与评分显示相反，所以应注意图片的移动；
2、鼠标点击相应的星星后，鼠标再次经过，被点击的星星及之前的星星样式都是被选中状态；
3、执行程序前，需要先获取cookie的内容，然后创建星星时传入。
实现cooki信息的传入有两种方式：（1）通过构造函数传入；（2）设置静态方法，在外部调用。此处采用的是第一种方法。
具体代码如下：
js文件
import Component from "./Component.js"; //常用的创建元素、填充元素等单独设置一个文件，方便使用export default class Star extends Component{label;score;starArr=[];starCon;face;pos=-1;obj={};static STAR_NUM=5;constructor(_label,_obj){ //通过构造函数传入标签名和cookie中的内容super();this.label=_label;this.obj=_obj;Object.assign(this.elem.style,{width:"auto",height:"32px",float:"left",margin:"30px",position:"relative",});this.createLabel();this.createStar();this.createScore();this.init(); //执行初始化函数，查询cokie中的内容}init(){if(this.obj===undefined)return;for(let prop in this.obj){if(prop===this.label){ //如果找到对应标签的评分，则修改评分的初始内容this.pos=this.obj[prop]-1;this.changeStar(this.pos);this.changeScore(this.pos+1);return;}}}createLabel(){let labels =document.createElement("span");labels.textContent=this.label;Object.assign(labels.style,{height:"16px",float:"left",fontSize:"12px",lineHeight:"16px",textAlign:"center",margin:"0px 10px",position:"relative"});this.elem.appendChild(labels);}createStar(){this.starCon=document.createElement("div");Object.assign(this.starCon.style,{height:"16px",float:"left",position:"relative"});for(let i=0;i<Star.STAR_NUM;i++){let star =document.createElement("div");Object.assign(star.style,{height:"16px",width:"16px",float:"left",// margin:"5px"backgroundImage:"url(./img/commstar.png)"});this.starArr.push(star);this.starCon.appendChild(star);}this.starCon.addEventListener("mouseover",e=>this.mouseHandler(e));this.starCon.addEventListener("click",e=>this.mouseHandler(e));this.starCon.addEventListener("mouseleave",e=>this.mouseHandler(e));this.face=document.createElement("div");Object.assign(this.face.style,{width:"16px",height:"16px",backgroundImage:"url(./img/face-red.png)",position:"absolute",top:"-16px",display:"none"});this.starCon.appendChild(this.face);this.elem.appendChild(this.starCon);}createScore(){ this.score =document.createElement("span");this.score.textContent="0分";Object.assign(this.score.style,{height:"16px",float:"left",fontSize:"12px",color:"#999",lineHeight:"16px",textAlign:"center",margin:"0px 10px",});this.elem.appendChild(this.score);} mouseHandler(e){if(e.type==="mouseover"){let index=this.starArr.indexOf(e.target);if(index<0)return;this.changeStar(index);this.changeFace(index);this.changeScore(index+1);}else if(e.type==="click"){let index=this.starArr.indexOf(e.target);if(index<0)return;this.pos=index;this.changeStar(index);this.dispatch();}else if(e.type==="mouseleave"){this.changeStar(this.pos);this.changeScore(this.pos+1);this.changeFace(-1);}}changeStar(n){for(let i=0;i<this.starArr.length;i++){if(i<=n || i<=this.pos){this.starArr[i].style.backgroundPositionY="-16px";}else{this.starArr[i].style.backgroundPositionY="0px"; }}}changeFace(n){let index=Star.STAR_NUM-n-1;if(n<0){this.face.style.display="none";return;}this.face.style.display="block";//移动相应的像素，鼠标移动到星星时显示对应的表情图片this.face.style.backgroundPositionX=-index*20+"px"; this.face.style.left=this.starArr[n].offsetLeft+"px";}changeScore(n){this.score.textContent=n+"分";if(n===0){ //n=0表示this.score.style.color="#999";}else{this.score.style.color="#f26";} }dispatch(){var evt=new Event("change");evt.label=this.label;evt.score=this.pos+1;this.dispatchEvent(evt);}}
html文件
<!DOCTYPE html><html lang="en"><head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>Document</title></head><body><script type="module">import Star from "./js/Star.js";var list=["商品描述","卖家服务态度","快递包装","快递配送速度","快递服务态度"];var obj;var date=new Date();date.setMonth(11);obj=getCookie(); //每次执行程序之前，先获取cookie中的内容 for(let i=0;i<list.length;i++){let star=new Star(list[i],obj); //把cookie中的内容传入star.appendTo("body");star.addEventListener("change",changeHandler);} function changeHandler(e){obj[e.label]=e.score;setCookie(obj,date); //设置cookie存储的内容}function 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;}}function 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;},{})} </script></body></html>
