JavaScript实现简单的星星评分效果

大概实现思路就是用一张灰色的星星作为背景，然后让有颜色的星星图片定位在灰色的星星图片上，控制有颜色星星图片的宽度即可达到基本效果。如下图：

下面上代码：

html head meta charset='UTF-8 '标题星星/title样式。斯塔农starWrap { width : 100 pxheart : 20px }。starnone{ position:相对；背景： URL(星-无20 px。png)不重复；} .星形{位置：绝对值；top : 0；左： 0；宽度： 70%;height : 20px background : URL(星s20px。巴布亚新几内亚)无重复；} # num { width : 30px }/style/head body div class=' starnone ' div class=' star wrap ' div class=' star ' id=' star '/div/div/div输入类型=' text ' id=' num ' % button id=' ok ' ok/button/div脚本窗口。onload=function(){ var star=document。getelementbyid(' star ')；var okBtn=文档。getelementbyid(' ok ')；var num=文档。getelementbyid(' num ')；okbtn。onclick=function(){ var value=parseFloat(num。值)；if (value100) { alert('请小于100');返回；} else if(value0){ alert('请大于0');返回；}明星。风格。宽度=值“px”；} }/脚本/正文/html用到的两个图片。

以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持我们。