https://typescript-zjhw7c.stackblitz.io

TypeScript代碼可以嗎?

/**
*?星級評分條類
*
*?@class?RatingBar
*/
class?RatingBar
{
/**
????*?默認設置
????*
????*?@static
????*?@memberof?RatingBar
????*/
public?static?readonly?defaults?=?{
mode:?"LightEntire",
maxStar:?5,
star:?0,
OnSelect:?()?=>?{?},
OnChosen:?()?=>?{?},
};
public?readonly?mode?=?{
"LightEntire":?this.LightEntire,
"LightHalf":?this.LightHalf,
}
el:?JQuery<HTMLElement>;
options:?{
mode?:?string,?maxStar?:?number,?star?:?number,?OnSelect?:?()?=>?void,?OnChosen?:?()?=>?void,
};
constructor(el:?JQuery<HTMLElement>,?options:?{?mode?:?string,?maxStar?:?number,?star?:?number,?OnSelect?:?()?=>?void,?OnChosen?:?()?=>?void,?})
{
options?=?$.extend({},?RatingBar.defaults,?options);
options.mode?=?(!this.mode[options.mode])???"LightEntire"?:?options.mode;
options.mode?=?(options.star?!=?Math.floor(options.star))???"LightHalf"?:?options.mode;
this.el?=?el;
this.options?=?options;
//初始化星星顯示
this.LightHalf(options.star);
//綁定事件
this.BindEvent();
}
/**
????*?綁定事件
????*
????*?@memberof?RatingBar
????*/
public?BindEvent()
{
this.el.on("mousemove",?".rating_item",?(e)?=>
{
this.OnMouseMove(e);
});
this.el.on("click",?".rating_item",?(e)?=>
{
this.OnClick(e);
});
this.el.on("mouseout",?".rating_item",?(e)?=>
{
this.OnMouseOut(e);
});
}
/**
????*?清除綁定事件
????*
????*?@memberof?RatingBar
????*/
public?UnbindEvent()
{
this.el.off("mousemove");
this.el.off("click");
this.el.off("mouseout");
}
/**
????*?點亮整顆星星
????*
????*?@param?{number}?num?要點亮的星星數目
????*?@memberof?RatingBar
????*/
public?LightEntire(num:?number)
{
num?=?Math.floor(num);?//防止傳入的數不是整數
let?item?=?this.el.find(".rating_item");
item.each(function(i)
{
item.eq(i).removeClass("show_half");?//清除半顆星
if?(i?<?num)
{
item.eq(i).addClass("show_entire");
}
else
{
item.eq(i).removeClass("show_entire");
}
});
}
/**
????*?點亮半顆星星
????*
????*?@param?{number}?num?要點亮的星星數目
????*?@memberof?RatingBar
????*/
public?LightHalf(num:?number)
{
let?count:?number?=?Math.floor(num);
let?isHalf:?boolean?=?count?!==?num;?//是否選擇半顆
let?item?=?this.el.find(".rating_item");
item.each((i)?=>
{
this.LightEntire(count);
if?(isHalf)
{
item.eq(count).addClass("show_half");
}
});
}
private?OnMouseMove(e:?JQuery.MouseMoveEvent<HTMLElement,?undefined,?any,?any>)
{
let?$self?=?$(e.currentTarget);
let?num:?number;
if?(e.pageX?-?$self.offset().left?<?$self.width()?/?2?&&?this.options.mode?==?"LightHalf")?//半顆
{
num?=?$self.index()?+?0.5;
}
else?//整顆
{
num?=?$self.index()?+?1;
}
this.LightHalf(num);
this.options.OnSelect();
}
private?OnClick(e:?JQuery.ClickEvent<HTMLElement,?undefined,?any,?any>)
{
let?$self?=?$(e.currentTarget);
let?num:?number;
if?(e.pageX?-?$self.offset().left?<?$self.width()?/?2?&&?this.options.mode?==?"LightHalf")?//半顆
{
num?=?$self.index()?+?0.5;
}
else?//整顆
{
num?=?$self.index()?+?1;
}
this.options.star?=?num;
this.options.OnChosen();
}
private?OnMouseOut(e:?JQuery.MouseOutEvent<HTMLElement,?undefined,?any,?any>)
{
this.LightHalf(this.options.star);
}
}
let?r1?=?new?RatingBar($("#r1"),?{
OnSelect:?()?=>
{
console.log("select");
},
OnChosen:?()?=>
{
r1.UnbindEvent();
}
});

jq也就那么幾句，自己改一改唄

自己寫吧，思路都有了，差別不是太大。

沒有源碼 手打的可以嗎 功能都實現了