case五星好评

五星好评案例

第一步导入js文件Start，定义List

 import Star from "./js/Star.js";
        let list=["商品符合度","店家服务态度","快递配送速度","快递员服务","快递包装"]
        for(var i=0;i<list.length;i++){
            // TODO Star
            let star=new Star(list[i]);
            star.appendTo("body");
            star.addEventListener("change",changeHandler);
        }

Component.js

export default class Component extends EventTarget{
    elem;
    constructor(){
        super();
        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);
    }
}

Start.js文件

import Component from "./Component.js";
 // TODO Star
export default class Star extends Component{
    static STAR_NUM=5;
    label="";
    starCon;
    face;
    score;
    pos=-1;
    starArr=[];
    static StarScoreList={};
    constructor(_label){
        super();
        this.label=_label;
        Object.assign(this.elem.style,{
            width: "auto",
            float: "left",
            height: "16px",
            paddingBottom: "10px",
            marginRight: "20px",
            paddingTop:"16px"
        })
        Star.StarScoreList[_label]=0;
        this.createLabel(_label);
        this.createStar();
        this.createScore();
    }
    // TODO 创建label标签
    createLabel(_label){
        let labels=document.createElement("span");
        labels.textContent=_label;
        Object.assign(labels.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.elem.appendChild(labels);
    }
    // TODO 创建星星
    createStar(){
        this.starCon=document.createElement("div");
        Object.assign(this.starCon.style,{
            float:"left",
            height:"16px",
            position:"relative",
            marginTop:"1px"
        })
        for(let i=0;i<Star.STAR_NUM;i++){
            let star=document.createElement("div");
            Object.assign(star.style,{
                width:"16px",
                height:"16px",
                float:"left",
                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);
    }
    // TODO 创建分数
    createScore(){
        this.score=document.createElement("span");
        Object.assign(this.score.style,{
            position: "relative",
            width: "30px",
            height: "16px",
            top:"-2px",
            marginLeft:"10px",
            lineHeight: "16px",
            textAlign: "right",
            color: "#999",
            font:'12px/150% tahoma,arial,Microsoft YaHei,Hiragino Sans GB,"\u5b8b\u4f53",sans-serif',
        });
        this.score.textContent="0分";
        this.elem.appendChild(this.score);
    }

    mouseHandler(e){
        switch(e.type){
            case "click":
            case "mouseover":
                let index=this.starArr.indexOf(e.target);
                if(index<0) return;
                if(e.type==="click"){
                    this.pos=index;
                    this.dispatch();
                }
                else{
                    this.changeScore(index+1);
                    this.changeFace(index);
                }   
                this.changeStar(index);
                break;
            case "mouseleave":
                this.changeStar(this.pos);
                this.changeScore(this.pos+1);
                this.changeFace(-1);
                break;
        }
    }

    changeStar(n){
        for(var 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";
            }
        }
    }
    changeScore(n){
        this.score.textContent=n+"分";
        if(n===0){
            this.score.style.color="#999";
        }else{
            this.score.style.color="#e4393c";
        }
    }
    changeFace(n){
        if(n<0){
            this.face.style.display="none";
            return
        }
       var index=Star.STAR_NUM-n-1
       this.face.style.display="block";
       this.face.style.backgroundPositionX=-index*20+"px";
       this.face.style.left=this.starArr[n].offsetLeft+"px";
    }
    dispatch(){
        Star.StarScoreList[this.label]=this.pos+1;
        var evt=new Event("change");
        evt.score=this.pos+1;
        evt.label=this.label;
        evt.scoreList=Star.StarScoreList;
        this.dispatchEvent(evt);
        
    }
}