利用cookie做五星好評

鯨落南北_發表於2020-11-01
Cookie

利用cookie做五星好評

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        body{
            margin: 20px;
        }
    </style>
</head>
<body>
    <script>
        /* 
        思路：
        1、建立好DOM結構，包括評價名稱，星星和笑臉，評分
        2、需要新增的事件：點選星星常亮，分數也固定；滑鼠滑動時星星，笑臉，分數相應改變；離開時，笑臉消失，點選了的星星和相應分數不變
        3、分離的功能：1.星星點亮，2、分數改變，3、改變笑臉，4、拋發點選的評價名稱和相應評分
        */
    </script>
    <script type="module">
        import Star from "./js/Star.js"
        var date=new Date();
        date.setFullYear(2025);
        let list=["商品符合度","店家服務態度","快遞配送速度","快遞員服務","快遞包裝"];
        var obj=getCookie();

        list.forEach(function(item){
            for(var prop in obj){
                var pos;
                // console.log(prop,item);
                if(item === prop)  pos=obj[prop];
                else continue;
            }
            // console.log(pos);
            let stars=new Star(item,pos);
            stars.appendTo("body");
            stars.addEventListener("change",changeHandler)
        })
        function changeHandler(e){
            setCookie(e.data,date);
        }
        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>

JS檔案

export default class Star extends EventTarget{
    label;
    elem;
    static STARNUM=5;
    starList=[];
    index;
    number;
    face;
    pos;
    static DATA={};
    constructor(_label,_pos=-1){
        super();
        this.pos=_pos;
        this.label=_label;
        this.elem=this.createElem();
        this.createLabel();
        this.createStar();
        // this.createFace();
        this.createNum();
    }
    appendTo(parent){
        if(typeof parent === "string") parent=document.querySelector(parent);
        parent.appendChild(this.elem);
    }
    createElem(){
        let div=document.createElement("div");
        Object.assign(div.style,{
            height:"16px",
            float:"left",
            padding:"10px 0",
            marginRight:"20px",
            position:"relative",
        });
        return div;
    }
    createLabel(){
        let div=document.createElement("div");
        div.textContent=this.label+" :";
        Object.assign(div.style,{
            float:"left",
            height:"16px",
            lineHeight:"16px",
            font:'12px tahoma, arial, "Microsoft YaHei", "Hiragino Sans GB", 宋體, sans-serif',
            marginRight: "10px",
            overflow: "hidden",
            whiteSpace: "nowrap",
            textOverflow: "ellipsis",
            color: "rgb(102, 102, 102)",
            
        });
        this.elem.appendChild(div);
    }
    createStar(){
        let div=document.createElement("div");
        Object.assign(div.style,{
            float:'left',
            // overflow:"hidden",
            position:"relative",
        })
        let parent=document.createDocumentFragment();
        for(let i=0;i<Star.STARNUM;i++){
            let star=document.createElement("div");
            Object.assign(star.style,{
                height:"16px",
                width:"16px",
                float:"left",
                background:"url(./img/star.png) 0 0",
            });
            this.starList.push(star);
            parent.appendChild(star);
        }
        div.addEventListener("mouseover",e=>this.mouseHandler(e))
        div.addEventListener("mouseout",e=>this.mouseHandler(e))
        div.addEventListener("click",e=>this.mouseHandler(e))
        this.createFace(div);
        div.appendChild(parent);
        this.elem.appendChild(div);
        this.changeStar(this.pos);
    }
    createFace(div){
        this.face=document.createElement("div");
        Object.assign(this.face.style,{
            position:"absolute",
            background:"url(./img/face.png) ",
            height:"16px",
            width:"16px",
            top:"-16px",
            display:"none",
        })
        div.appendChild(this.face);
    }

    createNum(){
        this.number=document.createElement("div");
        this.number.textContent="0分";
        Object.assign(this.number.style,{
            float:"left",
            position: "relative",
            width: "30px",
            height: "16px",
            top: -"2px",
            marginLeft: "10px",
            font: '12px / 150% tahoma, arial, "Microsoft YaHei", "Hiragino Sans GB", 宋體, sans-serif',
            textAlign: "right",
            color: "#666",
        })
        this.elem.appendChild(this.number);
        this.changeNum(this.pos);
    }
    mouseHandler(e){
        if(e.type==="mouseover"){
            this.index=this.starList.indexOf(e.target);
            this.changeStar(this.index);
            this.changeNum(this.index);
            this.changeFace(this.index);
        }else if(e.type==="click"){
            this.pos=this.index;
            this.changeStar(this.index);
            this.changeNum(this.index);
            this.dispatch();
        }else if(e.type==="mouseout"){
            this.changeStar(this.pos-1);
            this.changeNum(this.pos);
            this.changeFace(-1);
        }
    }
    changeStar(n){
        // console.log(this.pos);
        // console.log(this.index);
        this.starList.forEach((item,index)=>{
            if(index<=n || index<=this.pos) item.style.backgroundPositionY="16px";
            else item.style.backgroundPositionY="0px";
        })
    }
    changeNum(n){
        n=n+1;
        if(n>0){
            this.number.textContent=n+"分";
            this.number.style.color="#e4393c";
        }else{
            this.number.textContent=n+"分";
            this.number.style.color="#666";
        }
    }
    changeFace(n){
        if(n>-1){
            n=Star.STARNUM-this.index-1;
            Object.assign(this.face.style,{
                display:"block",
                right:n*16+"px",
                backgroundPositionX:-n*20+"px",
            })
        }
        else this.face.style.display="none";
    }
    dispatch(){
        Star.DATA[this.label]=this.pos;
        let evt=new Event("change");
        evt.data=Star.DATA;
        this.dispatchEvent(evt);
    }
}

相關文章