Javascript 将十进制额定值（最大5 w/0.1增量）转换为百分比

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

其工作方式是两个

span

都位于彼此之上。顶部为灰色，底部为橙色。底部

span

越接近100%宽度（85px），星星看起来就越“满”

一切正常，但现在我需要将传入的

reviewStarRating

number转换为百分比。

reviewStarRating

的值可以是0-5，增量为0.01。因此，一些传入的

reviewStarRating

示例是（0.4、1.3、2.8、3.0、4.2、4.9、5.0）

• 5.0

  reviewStarRating

  will==100%
• 4.0

  reviewStarRating

  will==80%
• 3.0

  reviewStarRating

  will==60%
• 2.0

  reviewStarRating

  will==40%
• 1.0

  reviewStarRating

  will==20%
• 0.0

  reviewStarRating

  will==0%

HTML

CSS

---

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

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

---

这是非常接近！谢谢我不得不将

100

更改为

85

，因为我所在的

div

范围很广。因此，如果

num

是5.0，我会得到

85px

的宽度，如果你试图给它以像素为单位的值。对我来说，更好的做法是以百分比表示，然后是100。（因此，如果容器是

85px

wide，则

100%将为
85px`）
@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;
}

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

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

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