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
}
}以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持脚本之家。
相关文章
可以针对校验状态为输入框添加额外的图标。接下来通过本文给大家分享bootstrap中添加额外的图标实例代码，需要的的朋友参考下吧2017-02-02
这篇文章主要给大家介绍了关于JavaScript中工厂函数与构造函数的相关资料，文中通过示例代码介绍的非常详细，对大家学习或者使用JavaScript具有一定的参考学习价值，需要的朋友们下面来一起学习学习吧2019-05-05
今天小编就为大家分享一篇关于JavaScript常用事件介绍，小编觉得内容挺不错的，现在分享给大家，具有很好的参考价值，需要的朋友一起跟随小编来看看吧2019-01-01
在 webpack5 中内置了 file-loader、url-loader、raw-loader, 可以直接通过配置实现常用功能,下面就来介绍一下webpack5处理图片、图标字体、多媒体等静态资源文件的实现方法,感兴趣的可以了解一下2023-12-12
这篇文章主要为大家详细介绍了JavaScript队列函数和异步执行的相关资料，具有一定的参考价值，感兴趣的小伙伴们可以参考一下2017-06-06
这篇文章主要介绍了JS运算符简单用法,结合实例形式详细分析了JavaScript各种逻辑运算符、数学运算符、关系运算符等相关操作技巧,需要的朋友可以参考下2020-01-01
这篇文章主要为大家详细介绍了JS实现玩转风车，文中示例代码介绍的非常详细，具有一定的参考价值，感兴趣的小伙伴们可以参考一下2022-02-02
不论是网站应用还是学习js,大家很注重ie与firefox等浏览器的兼容性问题，毕竟这两中浏览器是占了绝大多数。2009-12-12
JS中数组和对象是等同的,我们经常遇到需要判断一个key是否存在于对象中的情况,这篇文章主要给大家介绍了关于如何利用js判断对象是否拥有某个key的两种方法对比,需要的朋友可以参考下2023-12-12
JavaScript中使用stopPropagation函数停止事件传播例子
这篇文章主要介绍了JavaScript中使用stopPropagation函数停止事件传播例子,即阻止事件冒泡的一个方法,需要的朋友可以参考下2014-08-08
最新评论