JS实现服务五星好评
作者:Jonty_Chen
这篇文章主要为大家详细介绍了JS实现服务五星好评,文中示例代码介绍的非常详细,具有一定的参考价值,感兴趣的小伙伴们可以参考一下
本文实例为大家分享了JS实现服务五星好评的具体代码,供大家参考,具体内容如下
html部分
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <meta http-equiv="X-UA-Compatible" content="ie=edge"> <title>Document</title> </head> <body> <script type="module"> import Star from "./js/Star.js"; document.addEventListener(Star.STAR_SELECTED_EVENT,starSelectedHandler); let star=new Star("服务评价"); star.position=2; star.bool=true; star.appendTo(document.body); let star1=new Star("售后评价") star1.appendTo(document.body); function starSelectedHandler(e){ console.log(e.position,e.content); } </script> </body> </html>
js Star.js部分
import Utils from "./Utils.js"; export default class Star{ static STAR_SELECTED_EVENT="star_selected_Event"; constructor(content,bool){ // this就是new出的对象 this.arr=[]; this.position=-1; this.bool=bool; this.elem=this.createElem(content); } createElem(content){ if(this.elem) return this.elem; let div=Utils.ce("div",{ height:"35px", position:"relative" }); let label=Utils.ce("label",{ fontSize:"16px", marginRight: "10px", display:"inline-block", marginTop: "18px", },{ textContent:content }); div.appendChild(label); for(let i=0;i<5;i++){ let span=Utils.ce("span",{ display: 'inline-block', width:"16px", height:"16px", marginTop: "18px", backgroundImage:"url(./img/commstar.png)" }); this.arr.push(span); div.appendChild(span); } this.face=Utils.ce("span",{ display:"none", position:"absolute", width:"16px", height:"16px", backgroundImage:"url(./img/face-red.png)", backgroundPositionX:"0px", top:"0px" }); div.appendChild(this.face); // 原本事件函数中的this是被侦听的对象,现在通过箭头函数,this重新指回当前实例化对象 div.addEventListener("mouseover",e=>{ this.mouseHandler(e); }); div.addEventListener("mouseleave",e=>{ this.mouseHandler(e); }); div.addEventListener("click",e=>{ this.clickHandler(e); }) return div; } appendTo(parent){ parent.appendChild(this.elem); } mouseHandler(e){ if(this.bool) return; // e.currentTarget var num=this.arr.indexOf(e.target); if(e.type==="mouseover"){ if(e.target.constructor!==HTMLSpanElement) return; this.setStar(index=>{ return index<=num || index<=this.position; }) Object.assign(this.face.style,{ backgroundPositionX:-(this.arr.length-num-1)*20+"px", left:e.target.offsetLeft+"px", display:"block" }) }else if(e.type==="mouseleave"){ this.setStar(index=>{ return index<=this.position; }) this.face.style.display="none" } } clickHandler(e){ if(this.bool) return; if(e.target.constructor!==HTMLSpanElement) return; this.position=this.arr.indexOf(e.target); // 当使用回调函数时,this被重新指向,因此我们需要使用箭头函数重新将this指向实例化的对象 this.setStar(index=>{ return index<=this.position; }); let evt=new Event(Star.STAR_SELECTED_EVENT); evt.position=this.position; evt.content=this.elem.firstElementChild.textContent; document.dispatchEvent(evt); } setStar(fn){ for(let i=0;i<this.arr.length;i++){ if(fn(i)){ this.arr[i].style.backgroundPositionY="-16px"; }else{ this.arr[i].style.backgroundPositionY="0px"; } } } }
js Utils.js部分
export default class Utils { static IMG_LOAD_FINISH = "img_load_finish"; constructor() { } static ce(type, style, prop) { let elem = document.createElement(type); if (style) Object.assign(elem.style, style); if (prop) Object.assign(elem, prop); return elem; } static randomColor() { let c = "#"; for (let i = 0; i < 6; i++) { c += Math.floor(Math.random() * 16).toString(16); } return c; } static random(min, max) { return Math.floor(Math.random() * (max - min) + min); } static loadImgs(imgList, baseUrl, handler, type) { let img = new Image(); img.addEventListener("load", Utils.loadHandler); let url = Utils.getImgUrl(imgList[0], baseUrl, type); img.src = url; img.imgList = imgList; img.baseUrl = baseUrl; img.handler = handler; img.type = type; img.list = []; img.num = 0; } static loadHandler(e) { let img = this.cloneNode(false); this.list.push(img); this.num++; if (this.num > this.imgList.length - 1) { this.removeEventListener("load", Utils.loadHandler); if (this.handler) { this.handler(this.list); return; } let evt = new Event(Utils.IMG_LOAD_FINISH); evt.list = this.list; document.dispatchEvent(evt); return; } this.src = Utils.getImgUrl(this.imgList[this.num], this.baseUrl, this.type); } static getImgUrl(name, baseUrl, type) { let url = ""; if (baseUrl) url += baseUrl; if (type) { if (name.indexOf(".") < 0) name += "." + type; else name = name.replace(/\.\w+$/, "." + type); } url += name; return url } }
以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持脚本之家。