JS实现五星好评效果

用js实现面向对象方法实现京东的五星好评效果。

鼠标滑过时的显示：

当评价完成后，关闭浏览器重新打开页面，还是上次的评价结果。用cookie实现。

具体实现如下：

import componenet from "./component.js";
 
export default class stars extends componenet {
 
    label;
    stars_num = 5;
    stararr = [];
    score = 0;
    starscon;
    faceicon;
    scorecon;
    index = -1;
    name;
    
    static stars_list={};   //存储当前页面中所有的五星评价结果，一个商品为一组。用商品的id作为key，用商品评价组成一个数组，作为value。
    date=new date();
 
    constructor(_label,_name) {
        super("div");
        this.name=_name;
        this.label = _label;
        object.assign(this.elem.style, {
            width:"200px",
            height: "16px",
            float: "left",
            marginright: "20px",
            marginbottom: "10px",
            fontsize: "12px",
            color: "#666",
            lineheight: "16px",
            userselect: "none",
            position: "relative",
            top: "20px",
            left: "20px",
        })
        // 解析cookie中存储的评论结果并在创建每个评论时初始化score的值。
        this.initscore();
        // 创建评价标签部分
        this.createlabel();
        // 创建星星部分
        this.createstars();
        // 创建分数部分
        this.createscore();
        // 初始化星星样式。
        this.changestarstyle(this.score-1);
        // 初始化分数
        this.changescore(this.score);
        // 添加鼠标滑过点击事件。
        this.starscon.addeventlistener("mouseenter", e => this.mousehandler(e));
        this.starscon.addeventlistener("mouseleave", e => this.mousehandler(e));
        this.starscon.addeventlistener("mouseover", e => this.mousehandler(e));
        this.starscon.addeventlistener("click", e => this.clickhandler(e));
        this.date.setfullyear(2021);
    }
    appendto(_parent){
        super.appendto(_parent);
        if(!stars.stars_list[this.name]) stars.stars_list[this.name]=[];
        stars.stars_list[this.name].push(this.label+"="+this.score);
    }
    clickhandler(e){
        if(e.target.constructor!==htmllielement) return
        this.index = this.stararr.indexof(e.target);
        this.score = this.index+1;
        this.changestarstyle(this.index);
        this.changescore(this.index+1);
        // 每次点击都将评论的结果存储到cookie中，以便下次打开页面时读取。stars_list中存储的是label作为key，score作为value的数据。
        this.storagescore();
    }
    storagescore(){
        for(let prop in stars.stars_list){
            if(prop === this.name){
                stars.stars_list[prop].foreach((item,index)=>{
                    if(item.includes(this.label)) stars.stars_list[prop][index] = this.label+"="+this.score;
                });
            }
        }
        document.cookie="comment="+ json.stringify(stars.stars_list)+";expires="+this.date.toutcstring();
    }
    mousehandler(e) {
        switch (e.type) {
            case "mouseenter":
                this.faceicon.style.display = "block";
                break;
            case "mouseleave":
                this.faceicon.style.display = "none";
                this.changestarstyle(this.index);
                this.changescore(this.score);
                break;
            case "mouseover":
                let index = this.stararr.indexof(e.target);
                this.changestarstyle(index);
                this.changescore(index + 1);
                this.changefacestyle(index);
                break;
        }
    }
    changestarstyle(_i) {
        for (let n = 0; n < this.stararr.length; n++) {
            if (n <= _i || n < this.score) {
                this.stararr[n].style.backgroundpositiony = "-16px";
            } else {
                this.stararr[n].style.backgroundpositiony = "0px";
            }
        }
    }
    changefacestyle(_i) {
        this.faceicon.style.left = _i * 16 + "px";
        this.faceicon.style.backgroundpositionx = (_i + 1) * 20 + "px";
    }
    changescore(_i) {
        this.scorecon.textcontent = _i + "分";
    }
    createlabel() {
        let label = document.createelement("span");
        object.assign(label.style, {
            float: "left",
            padding: "0 5px",
        })
        label.textcontent = this.label;
        this.elem.appendchild(label);
    }
    createstars() {
        this.starscon = document.createelement("ul");
        object.assign(this.starscon.style, {
            margin: 0,
            padding: 0,
            liststyle: "none",
            width: "80px",
            height: "16px",
            float: "left",
            position: "relative",
        })
        for (let i = 0; i < this.stars_num; i++) {
            let li = document.createelement("li");
            object.assign(li.style, {
                width: "16px",
                height: "16px",
                float: "left",
                backgroundimage: "url(./star_img/commstar.png)",
            })
            this.stararr.push(li);
            this.starscon.appendchild(li);
        }
        this.faceicon = document.createelement("div");
        object.assign(this.faceicon.style, {
            width: "16px",
            height: "16px",
            backgroundimage: "url(./star_img/face-red.png)",
            backgroundpositionx: "-80px",
            position: "absolute",
            left: "0",
            top: "-16px",
            display: "none",
        })
        this.starscon.appendchild(this.faceicon);
        this.elem.appendchild(this.starscon);
    }
    createscore() {
        this.scorecon = document.createelement("div");
        object.assign(this.scorecon.style, {
            height: "16px",
            width:"20px",
            float: "left",
            padding: "0 5px",
        })
        this.scorecon.textcontent = this.score + "分",
        this.elem.appendchild(this.scorecon);
    }
    initscore(){
        // 直接读取cookie显示如下
        // comment={"1001":["商品符合度=5","店家服务态度=0","快递配送速度=0","快递员服务=0","快递包装=0"],"1002":["商品符合度=0","店家服务态度=0","快递配送速度=0","快递员服务=0","快递包装=0"]}
 
        // 解析cookie中存储的评论结果。
        if(!document.cookie.includes("comment=")) return
        let o = json.parse(document.cookie.match(/(\{.*?\})/)[1]);
        if(!o) return
        // 解析后的o如下
        // ["商品符合度=1", "店家服务态度=0", "快递配送速度=0", "快递员服务=0", "快递包装=0"]
        for(let prop in o){
            if(this.name===prop){
                this.score=o[prop].reduce((value,item,index)=>{
                    let arr=item.split("=");
                    if(arr[0].includes(this.label)) value=parseint(arr[1]);
                    return value;
                },0)
            }
        }
    }
}

使用时传入标签，新建实例。

import stars from './js/stars.js';
let list=["商品符合度","店家服务态度","快递配送速度","快递员服务","快递包装"];
 
        // let star = new stars(list[0]);
        // star.appendto("body");
 
        list.foreach(item=>{
            // 传入标签和对应的商品id
            let star = new stars(item,"1001");
            star.appendto(".div1");
        })
        list.foreach(item=>{
            let star = new stars(item,"1002");
            star.appendto(".div2");
        })

以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持。