JS实现服务五星好评

Wenda ·

更新时间:2024-09-20

· 1851 次阅读

本文实例为大家分享了JS实现服务五星好评的具体代码，供大家参考，具体内容如下

html部分

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
</head>
<body>
    <script type="module">
        import Star from "./js/Star.js";
        document.addEventListener(Star.STAR_SELECTED_EVENT,starSelectedHandler);
        let  star=new Star("服务评价");
        star.position=2;
        star.bool=true;
        star.appendTo(document.body);
        let  star1=new Star("售后评价")
        star1.appendTo(document.body);
        function starSelectedHandler(e){
            console.log(e.position,e.content);
        }
    </script>
</body>
</html>

js Star.js部分

import Utils from "./Utils.js";
export default class Star{
    static STAR_SELECTED_EVENT="star_selected_Event";
    constructor(content,bool){
        // this就是new出的对象
        this.arr=[];
        this.position=-1;
        this.bool=bool;
        this.elem=this.createElem(content);
    }
    createElem(content){
        if(this.elem) return this.elem;
        let div=Utils.ce("div",{
            height:"35px",
            position:"relative"
        });
        let label=Utils.ce("label",{
            fontSize:"16px",
            marginRight: "10px",
            display:"inline-block",
            marginTop: "18px",
        },{
            textContent:content
        });
        div.appendChild(label);
        for(let i=0;i<5;i++){
            let span=Utils.ce("span",{
                display: 'inline-block',
                width:"16px",
                height:"16px",
                marginTop: "18px",
                backgroundImage:"url(./img/commstar.png)"
            });
            this.arr.push(span);
            div.appendChild(span);
        }
        this.face=Utils.ce("span",{
            display:"none",
            position:"absolute",
            width:"16px",
            height:"16px",
            backgroundImage:"url(./img/face-red.png)",
            backgroundPositionX:"0px",
            top:"0px"
        });
        div.appendChild(this.face);
        // 原本事件函数中的this是被侦听的对象,现在通过箭头函数,this重新指回当前实例化对象
        div.addEventListener("mouseover",e=>{
            this.mouseHandler(e);
        });
        div.addEventListener("mouseleave",e=>{
            this.mouseHandler(e);
        });
        div.addEventListener("click",e=>{
            this.clickHandler(e);
        })
        return div;
    }
    appendTo(parent){
        parent.appendChild(this.elem);
    }
    mouseHandler(e){
        if(this.bool) return;
        // e.currentTarget
        var num=this.arr.indexOf(e.target);
        if(e.type==="mouseover"){
            if(e.target.constructor!==HTMLSpanElement) return;
            this.setStar(index=>{
                return index<=num || index<=this.position;
            })
            Object.assign(this.face.style,{
                backgroundPositionX:-(this.arr.length-num-1)*20+"px",
                left:e.target.offsetLeft+"px",
                display:"block"
            })
        }else if(e.type==="mouseleave"){
            this.setStar(index=>{
                return index<=this.position;
            })
            this.face.style.display="none"
        }
    }
    clickHandler(e){
        if(this.bool) return;
        if(e.target.constructor!==HTMLSpanElement) return;
        this.position=this.arr.indexOf(e.target);
        // 当使用回调函数时,this被重新指向,因此我们需要使用箭头函数重新将this指向实例化的对象
       this.setStar(index=>{
           return index<=this.position;
       });
       let evt=new Event(Star.STAR_SELECTED_EVENT);
       evt.position=this.position;
       evt.content=this.elem.firstElementChild.textContent;
       document.dispatchEvent(evt);
    }
    setStar(fn){
        for(let i=0;i<this.arr.length;i++){
            if(fn(i)){
                this.arr[i].style.backgroundPositionY="-16px";
            }else{
                this.arr[i].style.backgroundPositionY="0px";
            }
        }
    }
}

js Utils.js部分

export default class Utils {
    static IMG_LOAD_FINISH = "img_load_finish";
    constructor() {
    }
    static ce(type, style, prop) {
        let elem = document.createElement(type);
        if (style) Object.assign(elem.style, style);
        if (prop) Object.assign(elem, prop);
        return elem;
    }
    static randomColor() {
        let c = "#";
        for (let i = 0; i < 6; i++) {
            c += Math.floor(Math.random() * 16).toString(16);
        }
        return c;
    }
    static random(min, max) {
        return Math.floor(Math.random() * (max - min) + min);
    }
    static loadImgs(imgList, baseUrl, handler, type) {
        let img = new Image();
        img.addEventListener("load", Utils.loadHandler);
        let url = Utils.getImgUrl(imgList[0], baseUrl, type);
        img.src = url;
        img.imgList = imgList;
        img.baseUrl = baseUrl;
        img.handler = handler;
        img.type = type;
        img.list = [];
        img.num = 0;
    }
    static loadHandler(e) {
        let img = this.cloneNode(false);
        this.list.push(img);
        this.num++;
        if (this.num > this.imgList.length - 1) {
            this.removeEventListener("load", Utils.loadHandler);
            if (this.handler) {
                this.handler(this.list);
                return;
            }
            let evt = new Event(Utils.IMG_LOAD_FINISH);
            evt.list = this.list;
            document.dispatchEvent(evt);
            return;
        }
        this.src = Utils.getImgUrl(this.imgList[this.num], this.baseUrl, this.type);
    }
    static getImgUrl(name, baseUrl, type) {
        let url = "";
        if (baseUrl) url += baseUrl;
        if (type) {
            if (name.indexOf(".") < 0) name += "." + type;
            else name = name.replace(/\.\w+$/, "." + type);
        }
        url += name;
        return url
    }
}

js实现 js

1024 个赞