• 设为首页
  • 点击收藏
  • 手机版
    手机扫一扫访问
    迪恩网络手机版
  • 关注官方公众号
    微信扫一扫关注
    公众号

JS实现五星好评案例

原作者: [db:作者] 来自: [db:来源] 收藏 邀请

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

业务逻辑是我需要先创建出所有我需要用到的标签和样式再写出我们星星对应的行为,分数对应行为,笑脸对应行为,点击对应行为,抽象化出来,方便维护。并且在点击后我们抛出事件,记录下对应的name,分数等信息,保存在cookie中。

在编写过程中,一个是位置问题,很容易出现在没有创建就进行appendChild,第二个就是在添加行为时如何调整星星,笑脸的位置。

<!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">
        import Star from "./js/Star.js";
        let list=["商品符合度","店家服务态度","快递配送速度","快递员服务","快递包装"]
        list.forEach(item => {
            let star = new Star(item);  
            star.appendTo("body");
            star.addEventListener("change",changeHandler);
        });

        function changeHandler(e){
            var date=new Date();
            date.setMonth(11);
            setCookie(e.scoreList,date);
            
            function setCookie(data,date){    //JSON形式存储到cookie中
                var str=date===undefined ? "" : ";expires="+date.toUTCString();
                for(var prop in data){
                    var value=data[prop];
                    if(typeof value==="object" && value!==null) value=JSON.stringify(value);
                    document.cookie=prop+"="+value+str;
                }
            }
        }
    </script>
</body>
</html>
export default class Component{   //创建warp   和 appendTo方法
    elem;
    constructor(){
        this.elem=this.createElem();
    }
    createElem(){
        if(this.elem) return this.elem;
        let div=document.createElement("div");
        return div;
    }
    appendTo(parent){
        if(typeof parent==="string")parent=document.querySelector(parent);
        parent.appendChild(this.elem);
    }
}
import Component from "./Component.js";
export default class Star extends Component{
    label="";
    score;
    face;
    starCon;
    static STAR_NUM=5;
    starArr=[];
    static StarScoreList=[];
    pos=-1;
    constructor(_label){
        super();
        this.label=_label;
        Object.assign(this.elem.style,{
            width:"auto",
            height:"16px",
            float:"left",
            paddingBottom:"10px",
            marginRight:"20px",
            paddingTop:"16px",
        })
        Star.StarScoreList[_label]=0;
        this.createLable(_label);
        this.createStar();
        this.createScore();
    }
    createLable(_label){
        let labels=document.createElement("div");
        labels.textContent=_label;
        Object.assign(labels.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.elem.appendChild(labels);
    }
    createStar(){
        this.starCon=document.createElement("div");
        Object.assign(this.starCon.style,{
            float:"left",
            height:"16px",
            position:"relative",
            marginTop:"1px"
        })
        for(let i=0;i<Star.STAR_NUM;i++){
            let star=document.createElement("div");
            Object.assign(star.style,{
                backgroundImage:"url(./img/commstar.png)",
                width:"16px",
                height:"16px",
                float:"left",
            })
            this.starArr.push(star);
            this.starCon.appendChild(star);
        }
        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);
        this.starCon.addEventListener("mouseover",e=>this.mouseHandler(e))
        this.starCon.addEventListener("click",e=>this.mouseHandler(e))
        this.starCon.addEventListener("mouseleave",e=>this.mouseHandler(e))
        this.face=document.createElement("div");
           
    }
    createScore(){
        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,sans-serif",
        });
        this.score.textContent="0分";
        this.starCon.appendChild(this.score);
    }
    mouseHandler(e){  //鼠标行为
        let index=this.starArr.indexOf(e.target);
        switch(e.type){
            case "mouseover":
                if(index<0) return;
                this.changeFace(index);
                this.changeScore(index+1);
                this.changeStar(index+1);
                break;
            case "click":
                this.pos=index;
                this.dispatch();
                break;
            case "mouseleave":
                this.changeStar(this.pos+1);
                this.changeFace(this.pos);
                this.changeScore(this.pos+1);
                break;
            default:
                return;
        }
    }
    changeStar(n){
        for(let i=0;i<this.starArr.length;i++){
            if(i<n){
                this.starArr[i].style.backgroundPositionY="-16px";
            }else{
                this.starArr[i].style.backgroundPositionY="0px";
            }
        }
    }
    changeScore(n){
        this.score.textContent=n+"分";
        if(n===0){
            this.score.style.color="#999";
            
        }else{
            this.score.style.color="#e4393c";
        }
    }
    changeFace(n){
        if(n<0){
            this.face.style.display="none";
            return;
        }
        let index=Star.STAR_NUM-n-1; //这里的笑脸因为图片的原因是反向的
        this.face.style.display="block";
        this.face.style.backgroundPositionX=-index*20+"px";
        this.face.style.left=this.starArr[n].offsetLeft+"px";
    }
    changeScore(n){
        this.score.textContent=n+"分";
        if(n===0){
            this.score.style.color="#999";
        }else{
            this.score.style.color="#e4393c";
        }
    }
    dispatch(){
        // console.log("aaa")
        Star.StarScoreList[this.label]=this.pos+1;
        var evt=new Event("change");
        evt.score=this.pos+1;
        evt.label=this.label;
        evt.scoreList=Star.StarScoreList;
        this.dispatchEvent(evt);
    }
}

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


鲜花

握手

雷人

路过

鸡蛋
该文章已有0人参与评论

请发表评论

全部评论

专题导读
上一篇:
JS实现五星好评效果发布时间:2022-02-05
下一篇:
JS实现视频弹幕效果发布时间:2022-02-05
热门推荐
热门话题
阅读排行榜

扫描微信二维码

查看手机版网站

随时了解更新最新资讯

139-2527-9053

在线客服(服务时间 9:00~18:00)

在线QQ客服
地址:深圳市南山区西丽大学城创智工业园
电邮:jeky_zhao#qq.com
移动电话:139-2527-9053

Powered by 互联科技 X3.4© 2001-2213 极客世界.|Sitemap