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

html-css024

纯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>

<div style="position:relativebackground-image:url(你的大五角星图片地址)width:大五角星的宽度height:大五角星的高度">

<img src="第一个小五角星地址" style=" position:absoluteleft:20pxtop:20px"/>

<img src="第二个小五角星地址" style=" position:absoluteleft:30pxtop:30px"/>

<img src="第三个小五角星地址" style=" position:absoluteleft:40pxtop:40px"/>

<img src="第四个小五角星地址" style=" position:absoluteleft:50pxtop:50px"/>

</div>

把上面的代码复制到大五角星要放置的位置，那些中文是要你自己改的，小五角星可以自己在dw里面拖动的，大五角星不要拖动哦。