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

html-css018

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

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

HTML

CSS

显示结果

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

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

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

HTML5 中用CANVAS画一个五角星,代码如下:

<script type="text/javascript">

function init() {

var ctx = document.getElementById('stars').getContext('2d')

ctx.fillStyle = "#827839"

ctx.shadowColor="#000000"

ctx.shadowOffsetX=6

ctx.shadowOffsetY=6

ctx.shadowBlur=9

ctx.beginPath()

ctx.moveTo(15, 150)

ctx.lineTo(100,140)

ctx.lineTo(170,90)

ctx.lineTo(230,140)

ctx.lineTo(315,150)

ctx.lineTo(230,200)

ctx.lineTo(300,263)

ctx.lineTo(170,233)

ctx.lineTo(30,263)

ctx.lineTo(100,200)

ctx.closePath()

ctx.fill()

}

window.addEventListener('load', init, false)

</script>

<canvas id="stars" width="333" height="300">

Your browser does not support the canvas element .

</canvas>

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

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

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