<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函数)把实心星星和空心星星放一起,一次截取完成。突破性的思维,令人不得不惊叹。
如果有半分制,又该怎么做呢?
嗯,似乎还找不到半实心半空心的五角星字符 ←_←