JS實現(xiàn)五星好評案例

更新時間：2021年09月10日 11:15:39 作者：MaxLoongLvs

這篇文章主要為大家詳細介紹了JS實現(xiàn)五星好評案例，文中示例代碼介紹的非常詳細，具有一定的參考價值，感興趣的小伙伴們可以參考一下

本文實例為大家分享了JS實現(xiàn)五星好評案例的具體代碼，供大家參考，具體內(nèi)容如下

業(yè)務邏輯是我需要先創(chuàng)建出所有我需要用到的標簽和樣式再寫出我們星星對應的行為，分數(shù)對應行為，笑臉對應行為，點擊對應行為，抽象化出來，方便維護。并且在點擊后我們拋出事件，記錄下對應的name，分數(shù)等信息，保存在cookie中。

在編寫過程中，一個是位置問題，很容易出現(xiàn)在沒有創(chuàng)建就進行appendChild，第二個就是在添加行為時如何調(diào)整星星，笑臉的位置。

<!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";
        let list=["商品符合度","店家服務態(tài)度","快遞配送速度","快遞員服務","快遞包裝"]
        list.forEach(item => {
            let star = new Star(item);  
            star.appendTo("body");
            star.addEventListener("change",changeHandler);
        });

        function changeHandler(e){
            var date=new Date();
            date.setMonth(11);
            setCookie(e.scoreList,date);
            
            function setCookie(data,date){    //JSON形式存儲到cookie中
                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;
                }
            }
        }
    </script>
</body>
</html>

export default class Component{   //創(chuàng)建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;i<Star.STAR_NUM;i++){
            let star=document.createElement("div");
            Object.assign(star.style,{
                backgroundImage:"url(./img/commstar.png)",
                width:"16px",
                height:"16px",
                float:"left",
            })
            this.starArr.push(star);
            this.starCon.appendChild(star);
        }
        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);
        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");
           
    }
    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<this.starArr.length;i++){
            if(i<n){
                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;
        }
        let 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";
    }
    changeScore(n){
        this.score.textContent=n+"分";
        if(n===0){
            this.score.style.color="#999";
        }else{
            this.score.style.color="#e4393c";
        }
    }
    dispatch(){
        // console.log("aaa")
        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);
    }
}

以上就是本文的全部內(nèi)容，希望對大家的學習有所幫助，也希望大家多多支持腳本之家。

您可能感興趣的文章: