JS实现评价的星星功能

刚开始接触写星星评价时，哇！估计脑子刚被驴踢了，竟然想到了最笨的办法-手工画五角星。妈呀！钢性铸铁样式都写了好大一串，还沾沾自喜终于画出来了，然后瞅一瞅旁边的妹子写得怎么样了，哇！人家机智的！直接用符号就解决了！唉，智商捉急呀！

先上图看看吧：

虽然简单，还是有几个注意的地方：

1.未点击时的盘旋效果，星星会随鼠标移动亮起来喔。

2.点击后关闭盘旋效果。

3.点击同一颗星星，星星可以随时换色。

具体代码展示：

！doctype html html head meta charset=' UTF-8 ' title/title meta name=' viewport ' content=' width=设备宽度，初始比例=1，最小比例=1，最大比例=1，用户可缩放=no '//head style type=' text/CSS ' .恒星{空白： nowrap文本对齐：中心；边距-top : 20px；边距-底部： 20px} .明星李{显示器：直列-块；color : # adadad font-size : 40px；}/style body ul class=' stars ' Li/Li Li/Li Li/Li/ul script src=' http :/./js/common/jquery-git。js//script script $(function(){//为星星设置盘旋效果var isClicked=falsevar，然后单击edindex=-1；var点击次数=0；//点击同一颗星次数$('li ').hover(function() { if(！isclean){ $(this).css('color '，' # F0AD4E ')；定义变量索引=$(这个).index()；for(var I=0；i=索引；我){ $('李第：子'('我')).css('color '，' # F0AD4E ')；} } }，function() { if(！isclean){ $(' Li ').css('color '，' # ADADAD ')；} } );//星星点击事件$('li ').单击(函数(){ $('li ')).css('color '，' # ADADAD ')；isclean=true定义变量索引=$(这个).index()；for(var I=1；i=索引1;我){ $('李第：子'('我')).css('color '，' # F0AD4E ')；} if(index==beforclickedindex){//两次点击同一颗星星该星星颜色变化单击编号；if(clickNum % 2==1){ $(' li: th-child('(index 1)')')).css('color '，' # ADADAD ')；} else { $(' Li : th-child('(index 1)')').css('color '，' # F0AD4E ')；} } else { ClickNum=0；beforeClickedIndex=索引；} });});/脚本/正文/html总结

以上所述是小编给大家介绍的射流研究…实现评价的星星功能，希望对大家有所帮助，如果大家有任何疑问欢迎给我留言，小编会及时回复大家的！