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實現動態(tài)加載數據瀑布流，文中示例代碼介紹的非常詳細，具有一定的參考價值，感興趣的小伙伴們可以參考一下2022-07-07
微信小程序template模板與component組件的區(qū)別和使用詳解
這篇文章主要介紹了微信小程序template模板與component組件的區(qū)別和使用詳解，小編覺得挺不錯的，現在分享給大家，也給大家做個參考。一起跟隨小編過來看看吧2019-05-05
在Web開發(fā)中,處理圖片、字體等資源文件是一個常見的需求,傳統的做法是將這些資源文件放在靜態(tài)目錄中,然后在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