JS+cookie实现购物评价五星好评功能_javascript技巧_

import Component from './Component.js'; export default class Starr extends Component{     labelCon;     starCon;     startArr=[];     score;     face;     prv;     index;     static EVERYSCORE={};     static STARTNUM=5;     constructor(_label){         super();         this.label=_label;         Object.assign(this.elem.style,{             width: "auto",             float: "left",             height: "16px",             paddingBottom: "10px",             marginRight: "20px",             paddingTop:"16px"          });         Starr.EVERYSCORE[_label]=0;         this.creatLabel(_label);         this.creatStartCon();         this.creatScore();         this.starCon.addEventListener("mouseover",e=>this.mouseHandler(e));         this.starCon.addEventListener("mouseleave",e=>this.mouseHandler(e));         this.starCon.addEventListener("click",e=>this.mouseHandler(e));         // this.elem.addEventListener("change",e=>this.changeHandler(e));     }     //创建label容器     creatLabel(label){         this.labelCon=document.createElement("span");         Object.assign(this.labelCon.style,{             float: "left",             height: "16px",             lineHeight: "16px",             marginRight: "10px",             overflow: "hidden",             whiteSpace: "nowrap",             textOverflow: "ellipsis",             font: '12px/150% tahoma,arial,Microsoft YaHei,Hiragino Sans GB,"\u5b8b\u4f53",sans-serif',             color: "#666"         });         this.labelCon.textContent=label;         this.elem.appendChild(this.labelCon);     }     //创建星星和笑脸的容器 starCon     creatStartCon(){         this.starCon=document.createElement("div");         Object.assign(this.starCon.style,{             float:"left",             height:"16px",             position:"relative",             marginTop:"1px"         });         for(var i=0;iindex){                 this.changestar(this.prv);             }else{                 this.changestar(index);             }             //离开时         }else if(e.type==="mouseleave"){             this.face.style.display="none";             if(this.prv>=0){                 this.changestar(this.prv);                 this.changeScore(this.prv);                 this.changeFace(this.prv);             }else{                 this.changestar(-1);                 this.changeScore(-1);                 this.changeFace(0);             }             //点击时         }else if(e.type==="click"){             let index=this.startArr.indexOf(e.target);             this.prv=index;             this.changestar(this.prv);             this.changeScore(this.prv);             this.changeFace(this.prv);             this.getCookie(this.prv+1);             Starr.EVERYSCORE[this.label]=index+1;         }     }     //改变星星颜色方法     changestar(index){         for(var i=0;i