javascript - 将小数评级(最多 5 w/0.1 增量)转换为百分比

Question

我正在研究星级评分系统，我需要将我的小数值转换为百分比 %，以便我可以将其用作顶层的宽度。

它的工作方式是两个 span 都在彼此之上。顶部为灰色，底部为橙色。底部 span 越接近 100% 宽度 (85px)，星星看起来越“饱满”。

一切都按预期进行，但现在我需要将传入的 reviewStarRating 数字转换为百分比。 reviewStarRating 的值可以是 0 - 5，增量为 0.01。因此，传入 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%
• 2.0 reviewStarRating == 40%
• 1.0 reviewStarRating == 20%
• 0.0 reviewStarRating == 0%

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/Angular typescript

@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;
}
 

Answer 1

function toPercentage(num: number) : string {
    return `${num / 5 * 100}%`;
}