通过js实现星星打分效果,本示例是使用搜狗输入法打出两种样式的星星-"☆"或者"★",没有使用属性或者样式来实现;有的使用的是图片(通过设置其属性或者样式)来实现,不管使用哪种方式实现其效果,只要掌握星星评分的核心实现代码其它的诸如配上评语等都可以轻松拿下
示例样式与html
示例效果图
示例需求
1.鼠标移入某个星星,此星星及它前面的星星全部由"☆"变为"★"
2.鼠标移出任意的星星,其它所有星星恢复为此"☆"(未单击时)
3.如果单击其中某个星星,鼠标移出时,此星星及它前面的星星变为"★",此星星之后的变为默认的"☆";
步骤解析及代码
1为每个li添加两个自定义属性index与flag=0
1)index记录当前星星被单击时的下标i,用于为每个li的flag属性赋值
2)flag标记鼠标移出时,判断当前li是呈现五角星之中"☆"与"★"的哪一个;如果flag值为0,则呈现为"☆",如果flag值为1,则呈现为"★"
思路解析
单击事件
:假设单击第3个星星,则=2,则标记前3个li的flag=1,表示当鼠标移出星星时,前面3个星星变为此"★"
移入事件
前两个循环的作用:用于消除之前移入时所造成的效果
移出事件
现今实现类似功能的基本都有相应的组件,功能实现也非常便利
