将十进制等级(最大增量为5w/ 0.1 )转换为百分比
将十进制等级(最大增量为5w/ 0.1 )转换为百分比
提问于 2020-06-22 21:17:46
我正在研究一个星级系统，我需要将我的十进制值转换成百分比，这样我就可以用它作为顶层的宽度。
这样做的方式是，两个span都在对方的顶部。顶部是彩色灰色的，底部是橙色的。底部的span越接近100%的宽度(85 to )，星星看起来就越“满”。
这一切都像预期的那样工作，但现在我需要将传入的reviewStarRating号码转换成百分比。reviewStarRating值为0-5，增量为0.0 1.因此，传入reviewStarRating的一些例子是(0.4、1.3、2.8、3.0、4.2、4.9、5.0)。
- 5.0
reviewStarRating== 100% - 4.0
reviewStarRating== 80% - 3.0
reviewStarRating== 60%H 214H 1152.0<代码>D16将== 40%<代码>H 217<代码>H 1181.0<代码>D19将== 20%<代码>H 220<代码>H 121/代码>0.0代码>D 22将== 0%<代码>H 223<代码>F 224
HTML
<div class="star-container">
<span class="star-icon grey" [innerHTML]="icons"></span>
<span class="star-icon orange" [ngStyle]="getCssWidth()" [innerHTML]="icons"></span>
</div>JS /角形打字本
@Input() reviewCount: String;
@Input() reviewStarRating: String;
cssWidth: number = 0;
icon = '★';
icons = `${this.icon}${this.icon}${this.icon}${this.icon}${this.icon}`
constructor() { }
ngOnInit() {
this.calculateCssWidth();
}
public getCssWidth() {
let styles = {
'width': `${this.cssWidth.toString()}px`
}
return styles;
}
calculateCssWidth() {
this.cssWidth = this.round(this.reviewStarRating);
console.log(`${this.reviewStarRating} -> ${this.cssWidth}`);
}
round(num) {
return Math.ceil((num+1)/10)*10;
}CSS
.star-container {
max-width: 140px;
width: 85px;
height: 20px;
line-height: 20px;
}
.star-container .star-icon {
font-size: 20px;
position: relative;
}
.star-container .star-icon.orange {
color: #f37a1f;
top: -22px;
display: block;
overflow: hidden;
}
.star-container .star-icon.grey {
color: #e3e3e3;
}
.star-container:not(:last-child) {
margin-right: 5px;
}Stack Overflow用户
回答已采纳
发布于 2020-06-22 21:22:49
function toPercentage(num: number) : string {
return `${num / 5 * 100}%`;
}页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接：
https://stackoverflow.com/questions/62523634
复制相关文章
相似问题
腾讯云开发者
