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