saber酱的抱枕

Fly me to the moon

12/3
08:00
学习

使用js打印评分

四星:
二星:
三星:
零星:

<div class="rating" date-rating="4">四星:</div>
<div class="rating" date-rating="2">二星:</div>
<div class="rating" date-rating="3">三星:</div>
<div class="rating" date-rating="0">零星:</div>
<script type="text/javascript">
  function getRating(rating) {
      if(rating > 5 || rating < 0) throw new Error('数字不在范围内');
      return '★★★★★☆☆☆☆☆'.substring(5 - rating, 10 - rating );
  }
  var ratingwrap=document.getElementsByClassName("rating");
  for (var i = 0; i < ratingwrap.length; i++) {
    ratingwrap[i].innerHTML=getRating(ratingwrap[i].getAttribute("date-rating"));
  };
</script>

前几天在知乎上看到了一些巧妙的JavaScript代码,这个单独记录一下。设想满星5星的评分(也可以是10星,自己改代码),用js截取字符打印出评分。

我们一般的思路是先打印实心星星,然后补满空心星星。然而这个代码(getRating函数)把实心星星和空心星星放一起,一次截取完成。突破性的思维,令人不得不惊叹。

如果有半分制,又该怎么做呢?

嗯,似乎还找不到半实心半空心的五角星字符 ←_←

使用js打印评分