JS实现服务五星好评
更新时间：2022年09月01日 12:19:16 作者：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
}
}以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持脚本之家。
相关文章
BLOB (binary large object)，二进制大对象，是一个可以存储二进制文件的容器。下面这篇文章主要给大家介绍了关于利用Blob进行文件上传的相关资料，文中通过示例代码介绍的非常详细，需要的朋友可以参考下2018-08-08
这篇文章主要介绍了JavaScript寄生组合式继承,结合实例形式详细分析了寄生组合式继承原理、实现方法与相关注意事项,需要的朋友可以参考下2018-01-01
window.name 的美妙之处：name 值在不同的页面（甚至不同域名）加载后依旧存在，并且可以支持非常长的 name 值（2MB）。2008-09-09
这篇文章主要为大家详细介绍了js实现动态加载数据瀑布流，文中示例代码介绍的非常详细，具有一定的参考价值，感兴趣的小伙伴们可以参考一下2022-07-07
微信小程序template模板与component组件的区别和使用详解
这篇文章主要介绍了微信小程序template模板与component组件的区别和使用详解，小编觉得挺不错的，现在分享给大家，也给大家做个参考。一起跟随小编过来看看吧2019-05-05
在Web开发中,处理图片、字体等资源文件是一个常见的需求,传统的做法是将这些资源文件放在静态目录中,然后在HTML或CSS中引用,然而,这种方法在构建工具（如Webpack）中并不总是最理想的,为了解决这个问题,可以使用url-loader,需要的朋友可以参考下2025-04-04
eval函数在js中有不少用处了，下面我来给各位朋友介绍eval解析json的实例，基于这个实例我们引出来在eval处理json数据时的一些注意事项，希望文章对各位同学会有所帮助2014-01-01
跟我学习javascript的prototype使用注意事项
跟我学习javascript的prototype使用注意事项，介绍了在使用prototype的几点注意事项，需要的朋友可以参考下2015-11-11
这篇文章主要为大家介绍一下JS中一些你可能不熟悉的知识点给整理一下，学习js的朋友可以看一下2019-03-03
这篇文章主要介绍了带左右箭头图片轮播的JS代码，有需要的朋友可以参考一下2013-12-12
最新评论