JS實現(xiàn)服務五星好評

更新時間：2022年09月01日 12:19:16 作者：Jonty_Chen

這篇文章主要為大家詳細介紹了JS實現(xiàn)服務五星好評，文中示例代碼介紹的非常詳細，具有一定的參考價值，感興趣的小伙伴們可以參考一下

本文實例為大家分享了JS實現(xiàn)服務五星好評的具體代碼，供大家參考，具體內(nèi)容如下

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);
? ? ? ? // 原本事件函數(shù)中的this是被偵聽的對象,現(xiàn)在通過箭頭函數(shù),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);
? ? ? ? // 當使用回調(diào)函數(shù)時,this被重新指向,因此我們需要使用箭頭函數(shù)重新將this指向?qū)嵗膶ο?
? ? ? ?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
? ? }
}

以上就是本文的全部內(nèi)容，希望對大家的學習有所幫助，也希望大家多多支持腳本之家。

您可能感興趣的文章: