JS+cookie实现购物评价五星好评功能

2024-04-02 19:04:59 788人浏览薄情痞子

摘要

本文实例为大家分享了js+cookie实现购物评价五星好评功能的具体代码，供大家参考，具体内容如下案例实现的是购物评价中五星点评功能. 通过JS面向对象方法实现利用cookie实

本文实例为大家分享了js+cookie实现购物评价五星好评功能的具体代码，供大家参考，具体内容如下

案例实现的是购物评价中五星点评功能.

通过JS面向对象方法实现

利用cookie实现历史点评保存的功能,在下一次打开页面仍保存上一次点评效果.

具体html,js代码如下:

<!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">
    function getCookie(){
            return document.cookie.split(";").reduce((value,item,index)=>{
                var arr=item.split("=");
                var t=arr[1].trim();
                try{
                    t=JSON.parse(t);
                }catch(e){
                    t=t;
                }
                value[arr[0].trim()]=t;
                return value;
            },{})
    }
        if(document.cookie.length>0){
        var a=getCookie();
        var keys=Object.keys(a);
        console.log(a)
        console.log(keys)
        }
        var list=["用户体验","物流速度","物流服务","商家态度","商品包装"]
        import Starr from "./js/Starr.js";
        list.forEach((item,index)=>{
            let star= new Starr(item);
            star.appendTo("body");
            var index=keys.indexOf(item);
            if(index>-1){
                star.prv=a[item]-1;
                star.changeScore(a[item]-1);
                star.changestar(a[item]-1);
            }
        })
    </script>
</body>
</html>

JS代码部分:

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;i<Starr.STARTNUM;i++){
            let star = document.createElement("div");
            Object.assign(star.style,{
                width:"16px",
                height:"16px",
                float:"left",
                backgroundImage:"url(./img/commstar.png)",
            });
            this.starCon.appendChild(star);
            this.startArr.push(star)
        }
        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);
    }
    //创建分数
    creatScore(){
        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){
        //进入时
        if(e.type==="mouseover"){
            this.face.style.display="block";
            let index=this.startArr.indexOf(e.target);
            if(index<0)return;
            this.changeFace(index);
            this.changeScore(index);
            if(this.prv>index){
                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<this.startArr.length;i++){
            if(i<=index)this.startArr[i].style.backgroundPositionY="-16px";
            else this.startArr[i].style.backgroundPositionY="0px";
        }
    }
    //分数改变方法
    changeScore(index){
        this.index=index;
        this.score.textContent=index+1+"分";
        if(index+1===0){
            this.score.style.color="#999";
        }else{   //否则有分数,文字为红色
            this.score.style.color="#e4393c";
        }
    }
    //笑脸变化
    changeFace(index){
        this.face.style.left=index*16+"px";
        this.face.style.backgroundPositionX=-(4-index)*20+"px";
    }
    //设置cookie
    getCookie(index){
        var date = new Date();
        date.setFullYear(2021);
        if(!index)index=0;
        document.cookie=this.label+"="+index+";expires="+date.toDateString();
    }
}

最终实现效果: 下次打开仍会显示该点评效果