五星评论（面向对象）

最新推荐文章于 2022-03-30 15:59:10 发布

原创最新推荐文章于 2022-03-30 15:59:10 发布 · 238 阅读

1 ·

CC 4.0 BY-SA版权

JS基础练习题专栏收录该内容

19 篇文章

订阅专栏

在这里插入图片描述

faceRed.js
class FaceRed{
    constructor(label,parent){//初始化
        this.faceRed=this.initFaceRed(label,parent);
        this.spanList=Array.from(this.faceRed.querySelectorAll(".redStar"));
        this.position=-1;
    }
    initFaceRed(_label,parent){
        if(this.faceRed) return this.faceRed;
        if(!parent) parent=document.body;
        let div=document.createElement("div");
        Object.assign(div.style,{
            paddingTop:"20px",
            float:"left",
            marginLeft:"10px"
        });
        let labelElem=document.createElement("label");
        labelElem.textContent=_label;
        div.appendChild(labelElem);
        Object.assign(labelElem.style,{
            float: "left",
            marginRight:"5px"
        });
        for(let i=0;i<5;i++){
            let span=this.createRed();
            span.className="redStar";
            div.appendChild(span);
        }
        let clear=document.createElement("a");
        Object.assign(clear.style,{
            display: "block",
            visibility: "hidden",
            opacity: 0,
            height: 0,
            clear: "both",
            zoom:1
        });
        div.appendChild(clear);
        parent.appendChild(div);
        div.self=this;
        div.addEventListener("mouseover",this.mouseHandler);
        div.addEventListener("mouseout",this.mouseHandler);
        div.addEventListener("mouseleave",this.mouseLeaveHandler);
        div.addEventListener("click",this.clickHandler);
        return div;
    }
    createRed(){
        let span=document.createElement("span");
        Object.assign(span.style,{
            display: "block",
            float: "left",
            width: "16px",
            height: "16px",
            background: "url('img/commstar.png') 0 0",
            marginTop: "3px",
            cursor: "pointer"
        });
        let face=document.createElement("span");
        Object.assign(face.style,{
            display: "none",
            width: "16px",
            height: "16px",
            background: "url('img/face-red.png') 0 0",
            marginTop: "-18px",
        });
        face.className="faceReds";
        span.appendChild(face);
        return span;
    }
    mouseHandler(e){
        if(e.target.constructor!==HTMLSpanElement) return;
        if(e.target.className==="faceReds")return;
        let index=this.self.spanList.indexOf(e.target);
        if(e.type==="mouseover"){
            if(index>this.self.position){
                this.self.setStarRed(index);
            }else{
                this.self.setStarRed(this.self.position);
            }
            e.target.firstElementChild.style.display="block";
            e.target.firstElementChild.style.backgroundPositionX=-(4-index)*20+"px";
        }else if(e.type==="mouseout"){
            e.target.firstElementChild.style.display="none";
        }
    }
    mouseLeaveHandler(e){
        this.self.setStarRed(this.self.position)
    }
    clickHandler(e){
        if(e.target.constructor!==HTMLSpanElement) return;
        this.self.position=this.self.spanList.indexOf(e.target);
    }
    setStarRed(index){
        for(let i=0;i<this.spanList.length;i++){
            if(i<=index){
                this.spanList[i].style.backgroundPositionY="-16px";
                continue;
            }
            this.spanList[i].style.backgroundPositionY="0px";
        }
    }

}

2.Html

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script src="js/faceRed.js"></script>

</head>
<body>
    <script>
        let face=new FaceRed("快速包装");
        let face1=new FaceRed("快递服务");
        let face2=new FaceRed("送货上门");
        let face3=new FaceRed("面向对象");
//        Stylesheet
    </script>
</body>
</html>