原生JS实现服务五星好评

客官°小女子只卖身不卖艺 2023-05-31 10:08 91阅读 0赞

五星好评  
![鼠标滑动确定][20191024143915999.png]  
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
        }
    }

[20191024143915999.png]: /images/20230531/d2a8f1a95b9344aaaeea18fe5eb53de8.png