将十进制评级（最大 5 w/0.1 增量）转换为百分比答案

【问题标题】：Convert a decimal rating (max of 5 w/ 0.1 increments) to a percentage将十进制评级（最大 5 w/0.1 增量）转换为百分比
【发布时间】：2020-10-12 20:35:41
【问题描述】：

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

其工作方式是两个span 都在彼此之上。顶部为灰色，底部为橙色。底部span 越接近 100% 宽度（85 像素），星星看起来越“饱满”。

一切正常，但现在我需要将传入的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 打字稿

@Input() reviewCount: String;
@Input() reviewStarRating: String;
cssWidth: number = 0;
icon = '&#9733;';
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;
}

【问题讨论】：

标签： javascript css angular typescript

【解决方案1】：

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

【讨论】：

这非常接近！谢谢。我不得不将100 更改为85，因为我正在使用的div 是85px 宽。这使得如果num 是5.0 我会得到85px 的宽度
如果你试图以像素为单位赋予它价值。对我来说，更好的做法是以百分比形式给出值，并给出 100。（如果容器为 85px 宽，则为 100% will be 85px`）

【解决方案2】：

感谢@Yosef 帮助我完成了大部分工作。这是我正在寻找的解决方案。 85 是因为我正在使用的 div 的宽度是 85px 宽。所以如果我输入一个 5.0 的数字，我希望 85px 是它会返回的最大值。

toPercentage(num) {
   return (num / 5 * 85);
}

【讨论】：