JS如何实现五星好评

这篇文章主要介绍了JS如何实现五星好评，具有一定借鉴价值，感兴趣的朋友可以参考下，希望大家阅读完这篇文章之后大有收获，下面让小编带着大家一起了解一下。

具体内容如下

业务逻辑是我需要先创建出所有我需要用到的标签和样式再写出我们星星对应的行为，分数对应行为，笑脸对应行为，点击对应行为，抽象化出来，方便维护。并且在点击后我们抛出事件，记录下对应的name，分数等信息，保存在cookie中。

在编写过程中，一个是位置问题，很容易出现在没有创建就进行appendChild，第二个就是在添加行为时如何调整星星，笑脸的位置。

export default class Component{   //创建warp   和 appendTo方法    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);    }}

import Component from "./Component.js";export default class Star extends Component{    label="";    score;    face;    starCon;    static STAR_NUM=5;    starArr=[];    static StarScoreList=[];    pos=-1;    constructor(_label){        super();        this.label=_label;        Object.assign(this.elem.style,{            width:"auto",            height:"16px",            float:"left",            paddingBottom:"10px",            marginRight:"20px",            paddingTop:"16px",        })        Star.StarScoreList[_label]=0;        this.createLable(_label);        this.createStar();        this.createScore();    }    createLable(_label){        let labels=document.createElement("div");        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);    }    createStar(){        this.starCon=document.createElement("div");        Object.assign(this.starCon.style,{            float:"left",            height:"16px",            position:"relative",            marginTop:"1px"        })        for(let i=0;ithis.mouseHandler(e))        this.starCon.addEventListener("click",e=>this.mouseHandler(e))        this.starCon.addEventListener("mouseleave",e=>this.mouseHandler(e))        this.face=document.createElement("div");               }    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,sans-serif",        });        this.score.textContent="0分";        this.starCon.appendChild(this.score);    }    mouseHandler(e){  //鼠标行为        let index=this.starArr.indexOf(e.target);        switch(e.type){            case "mouseover":                if(index<0) return;                this.changeFace(index);                this.changeScore(index+1);                this.changeStar(index+1);                break;            case "click":                this.pos=index;                this.dispatch();                break;            case "mouseleave":                this.changeStar(this.pos+1);                this.changeFace(this.pos);                this.changeScore(this.pos+1);                break;            default:                return;        }    }    changeStar(n){        for(let i=0;i
感谢你能够认真阅读完这篇文章，希望小编分享的"JS如何实现五星好评"这篇文章对大家有帮助，同时也希望大家多多支持，关注行业资讯频道，更多相关知识等着你来学习!