JavaScript实现星级评定功能

这个例子分享了js星级评定的具体代码，供大家参考。具体内容如下

渲染：

！DOCTYPE html html lang=' en ' head meta charset=' UTF-8 ' title document/title style。容器{ float:left} .得分{ float:左；相对位置：宽度： 100 px；边距-top : 5px；左边距left: 10px} span { display: none绝对位置：left : 0；top : 0；} .scoreDisplay { display:块；}/style script src=' http : jquery-1 . 12 . 2 . min . js '/script/head body！-把五张图片放在一个容器里，首先所有的图片都是空星星-！-这种情况的要点是在鼠标上移时更改图片的src-Div class=' container ' img src=' http:idea/empty.png' alt=' ' img src=' http:idea/empty . png ' alt=' ' img src=' http : idea/empty . png ' alt=' img src=' http : idea/empty . png ' alt=' img src=' http : idea/empty . png ' alt='/Div class容器')；//获取5张图片的集合var span=$('。分数跨度’)；var i，j，k；//定义变量I，j，k k=-1；//k给一个-1的初始值，否则后面的第一颗星会一直点亮img.mouseenter(function(){ //设置鼠标进入时的效果，先熄灭所有的星星，然后根据用户鼠标输入的星星下标值点亮星星。span . remove class(' score display ')；//鼠标进入时，清除img.attr ('src '，'右侧的注释。idea/empty . png ')；I=img . index(this)；for(j=0；j=I；j ) { img.eq(j)。attr('src '，'。idea/shining . png ')；} span.eq(i)。add class(' score display ')；//根据用户输入的I值显示评论})。mouseleave(function(){ //仍然关闭所有星星，然后根据K值span.removeClass('scoreDisplay ')点亮星星；//当鼠标离开时，首先清除注释img.attr ('src '，')。idea/empty . png ')；//然后把所有的星星都变成空星星为(j=0；j=k；J )//根据最终值K {img.eq (j)确定点亮多少颗星。attr ('src '，'。idea/shining . png ')；}如果(k==-1)//如果k=-1，将不显示任何评论内容{span。remove class(' score display ')；} else{ span.eq(k)。add class(' score display ')；//根据最终值k}})显示注释；$('img ')。click(function(){ //k记录用户点击鼠标时的星索引值k=img . index(this)；})/脚本/正文/html以上就是本文的全部内容。希望对大家的学习有帮助，支持我们。