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; }
/* 定义函数 渲染评分组件 */ 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); }
运行效果如下:
---星星为背景图片!
---偶尔听到一个课程讲解的,感觉会用到,就留下了。记录于此。