最近做项目做到一个五星评分的，这个分数的显示，要精确到小数，就是如果分数是4.3分，就显示4.3颗星星，这个看上去好像挺难的，但是做起来很简单。
首先我们整理一下思路，这效果要怎么做出来，因为这个分数的原因，很容易让人联想到进度条，所以就想到了用遮罩来出来。做法很简单，灰色星星的图片放在下面，然后亮色星星的图片在上面，重叠两张图片，任何控制上面亮色的星星图片，根据分数显示它的长度，这样便能实现这个效果了。废话不多说，直接把代码贴上。
<meta charset="utf-8"> <style type="text/css">#bg{ width: 60px; height: 16px; background: url("img/star_gray.png");}#over{ height:16px; background:url("img/star_org.png") no-repeat;}</style> <div id="bg">
<!--这里是背景，也就是灰色的星星--> <!--说明，这里的width就是设置分数啦，以我写的为例，一个星星的长度是12px，也就是1分12px，如果是4.3分，就是4.3*12px = 51.6px的长度，当然这个一般是取得数据后用js或者其他模板语言去控制的--> <div id="over" style="width:51.6px"></div>
<!--这里是遮罩，设置宽度以达到评分的效果--> </div>
想要看五星打分的效果实现，看我的下一篇博客。
PS：这是五星显示和打分的源文件以及图片素材http://pan.baidu.com/s/1c0ruT3q
Author：立礼
Sign：人生不要有太多的幻想，而要有更多的行动。
版权声明：本文为博主原创文章，未经博主允许不得转载。
Warum verschwinden die Wörter nach der Worteingabe?
So verwenden Sie die Monatsfunktion
Verwendung von setInterval in JS
Anleitung zur Herstellung beschrifteter Münzen
Kosteneffizienzanalyse des Lernens von Python, Java und C++
Einführung in die Wartungsmethoden für Frequenzumrichter
So verwenden Sie fusioncharts.js
Wie viele Arten von USB-Schnittstellen gibt es?
![[Web-Frontend] Node.js-Schnellstart](https://img.php.cn/upload/course/000/000/067/662b5d34ba7c0227.png)
