JS原生評分元件
阿新 • • 發佈：2018-11-06
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); }
執行效果如下：
---星星為背景圖片！
---偶爾聽到一個課程講解的，感覺會用到，就留下了。記錄於此。