转一个东半球的最简评分组件~~

来源于一个知乎问答：https://www.zhihu.com/question/46943112/answer/113583615

代码

const rate = v=>"★★★★★☆☆☆☆☆".slice(5 - v, 10 - v);

升级版

思路

       用☆☆☆☆☆做背景，使用★★★★★将其覆盖，然后控制上层★★★★★的宽度配合over-flow：hidden进行截取。

代码

hmtl

<div class=" rate" >

    <span class=" rate-flower ">☆☆☆☆☆</ span >

    <span class=" rate-under " > ★★★★★ </span>

</div>

css

.rate{ position: relative; color:#2ad; }

.rate-flower, .rate-under{ display: inline-block; }

.rate-under{ position: absolute; top: 0; left: 0; width: 0; overflow: hidden; }

js

const rate = v=>{ document.querySelector(".rate-under").style.width = v+"em"; }; rate(2.5);

升级过后支持小数评分~~~~

转自：https://zhuanlan.zhihu.com/p/33464317

PS:简书里面会自动转化HTML代码感觉很麻烦  能不能关了~~~会的教我一下