JS原生评分组件

JS原生评分组件

<html>
    <head>
        <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
        <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1"/>
        <meta name="viewport" content="width=device-width, initial-scale=1.0, minimum-scale=1.0, maximum-scale=1.0, user-scalable=no">
        <title>评分组件</title>
        <link rel="stylesheet" href="css/reset.css">
        <style>
            /*外层底色星星*/
            .star-rating{
                background-image: url("img/bgimg.svg");
                width: 480px;
                height: 48px;
                background-size: 48px;
                cursor: pointer;
                position: relative;
            }
            .star-rating[data-title]:hover::after{
                content: attr(data-title);
                position: absolute;
                left: 0;
                background-color: #eee;
                padding: 5px 5px;
                border-radius: 5px;
            }
            /*内层星星*/
            .star-value{
                background-image: url("img/cover.svg");
                width: 50%;
                height: 100%;
                background-size: 48px;
            }
        </style>
    </head>
    <body>
    <!--外层背景星星和内部覆盖星星-->
        <div class="star-rating">
            <div class="star-value"></div>
        </div>
        <div id="rater"></div>
    </body>
    <script src="js/index.js"></script>
    <script>
        rater({
            element:document.getElementById("rater"),
            max:10,
            starSize:36,
            showTip:true,
            step:0.5,
            rating:3
        });
    </script>
</html>

 

 

@charset "UTF-8";

body,div,dl,dt,dd,ul,li,pre,form,fieldset,select,input,textarea,button,p,img,iframe{  margin: 0;  padding: 0;  }
h1,h2,h3,h4,h5,h6{ font-weight:normal; margin: 0; padding: 0; }
body{  width: 100%;  font-family: "Arial Narrow","SimSun","宋体";  background-color: #fff; -webkit-overflow-scrolling: touch;overflow-scrolling: touch; }
/* 重置button边框 */
button{ border: none; }
/* 去掉列表前的标识, li 会继承 */
ol,ul{list-style: none;}
/* 让链接默认不显示下划线*/
a{cursor: pointer;text-decoration: none;}
/* 清理浮动 */
.clearfix:before,.clearfix:after{ display: block;  content: " ";  clear: both;  }
/* for ie67*/
.clearfix{zoom: 1;}
/* HTML5 媒体文件跟 img 保持一致 */
audio,canvas,video{  display: inline-block;  *display: inline;  *zoom: 1;  }
address,caption,cite,code,dfn,em,th{  font-style: normal;  font-weight: normal;  }
.box-sizing{  -moz-box-sizing: border-box;  -webkit-box-sizing: border-box;  -o-box-sizing: border-box;  -ms-box-sizing: border-box;  box-sizing: border-box;  }
/*p{ text-align:justify; text-justify:distribute;}*/
div, p, span {  text-overflow: ellipsis;  word-break: break-all;  word-wrap: break-word;  }
/*iphone及ipad下输入框默认内阴影*/
input, button {  outline: none;  -webkit-appearance: none;  }
textarea {  resize: none;  outline: none;  }
img {  vertical-align: middle;  border: 0;  width: 100%;  }
a:active, a:hover {  outline: 0;  }
/*ios和android下触摸元素时出现半透明灰色遮罩*/
a, input {  border: none;  outline: none;  -webkit-tap-highlight-color: rgba(255, 255, 255, 0);  }
input[type=button] {  cursor: pointer;  }
input[type=submit] {  cursor: pointer;  }
reset.css
/*
 定义函数 渲染评分组件
 */
function rater(options){
    var showTip;
    //options为传入的一个参数(为对象)
    //判断options是否为一个对象
    if(Object.prototype.toString.call(options)!=="[object Object]"){
        throw new Error("需要一个字面量对象作为参数");
    }
    if(typeof options.element === "undefined" || options.element == null){
        throw new Error("需要一个dom节点");
    }
    if(typeof options.showTip === "undefined"){
        showTip=true;
    }else {
        showTip=options.showTip;
    }
    //console.log(showTip);
    if(typeof options.step !== "undefined"){
        if(options.step <= 0 || options.step > 1){
            throw new Error("step必须是0-1的小数");
        }
    }
    /*
       参数:
            element:dom 当前作用元素
            max:当前最大星星数量
            starSize:星星大小
            showTip:布尔 true 显示title false 不显示
            step:0-1 增长速度
            rating:默认几个星星
    */
//    获取参数
    var ele=options.element;
    var max=options.max||5;
    var starSize=options.starSize||48;
    var step=options.step||1;
    var currentStar;//当前星星数量
    var rating;//设置当前记录值 用来判断点击后的记录纸
    // Dom操作
    ele.style.width=max*starSize+"px";
    ele.classList.add("star-rating");
    //ele.className += "star-rating";
    ele.style.backgroundSize=starSize+"px";
    ele.style.height=starSize+"px";
    // 创建内部div节点 添加到当前节点中
    var createDom=document.createElement("div");
    createDom.classList.add("star-value");
    createDom.style.backgroundSize=starSize+"px";
    // 默认0%
    if(!options.rating){
        createDom.style.width="0%";
    }else{
        rating=options.rating;
        createDom.style.width=(options.rating/max)*100+"%";
    }

    ele.appendChild(createDom);

    //mousemove事件函数
    function onStarIn(e){
        var x=e.offsetX;//父级左边的距离
        var eleWidth=ele.offsetWidth;//父级的宽度
        var percent=x/eleWidth;//获取百分比
        if(step===1){
            currentStar=Math.ceil(percent*max);//当前星星数量
        }else {
            for (var i = step;;i+=step){
                if(i>=percent*max){
                    currentStar=i;
                    break;
                }
            }
            currentStar=parseFloat(currentStar.toPrecision(12));
        }
    //  渲染宽度
        createDom.style.width=(currentStar/max)*100+"%";
        //设置自定义属性
        if(showTip){
            ele.setAttribute("data-title",currentStar+"/"+max);
        }
    }
    //mouseleave事件函数
    function onStarOut(){
        if(rating){
            createDom.style.width=(rating/max)*100+"%";
        }else{
            createDom.style.width="0px";
        }
    }
    //click 事件函数
    function onStarClick(){
        rating=currentStar;
        createDom.style.width=(currentStar/max)*100+"%";
    }
    //绑定事件
    ele.addEventListener("mousemove",onStarIn);
    ele.addEventListener("mouseleave",onStarOut);
    ele.addEventListener("click",onStarClick);
}

运行效果如下:

---星星为背景图片!

---偶尔听到一个课程讲解的,感觉会用到,就留下了。记录于此。

posted @ 2018-11-06 14:35  Wow_Jerry  阅读(624)  评论(0编辑  收藏  举报