纯CSS显示评分星星（包括半星）

html-css020

纯CSS显示评分星星（包括半星）,第1张

已经有好多插件可以实现星星打分和显示，但只是根据分数来显示星星或半星时，只需用CSS实现会比较简洁不需要引用多于的JS。

HTML

CSS

显示结果

想要显示不数量的星星时，只要修改 data-rating 的设置值即可。

下方的链接可以直接动手调试

https://codepen.io/kou-kaisei/pen/OJOgwJE

实现思路如下：

在页面初始化一个星星。

js中，根据数值去进行循环，clone()页面中的星星。

然后显示追加到页面中。

这样就完成了。

你可以到这个地方去看一下

http://www.zhangxinxu.com/study/201308/hello-star.html

半星可以将图片换成灰色星星和半星然后多加5个A标签和label