-
直接上代码
-
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Document</title> <style> /* 清楚ul和li的默认样式并让文本居中 */ ul { padding: 200px 0; margin: 0; list-style: none; text-align: center; } /* 将li设为行内块并修改颜色 字体大小 鼠标样式 */ li { display: inline-block; color: red; font-size: 30px; cursor: pointer; } </style> <!-- 引入jquery文件 --> <script src="./jquery.min.js"></script> <script> $(function() { //用于储存鼠标点击事件星星对应的索引 var xing; function fn(num) { //用于计算星星应为实心还是空心的函数 //遍历所有星星 $('li').each(function(index, ele) { //用接收来的变量和当前的索引做对比 大于或等于索引星星为实心 小于则为空心 $(ele).html(num >= index ? "★" : "☆"); }) } //给所有星星添加hover事件 $("li").hover(function() { //鼠标经过时将当前星星的索引储存到变量 var num = $(this).index(); //将变量传递给函数 fn(num); }, function() { //鼠标离开事件 //将变量传递给函数 此举是为了让鼠标离开后星星的样式和上次点击之后的样式保持一致 fn(xing); }) // 给所有星星添加点击事件 $("li").click(function() { //将点击的星星所对应的索引赋予变量 xing = $(this).index(); //将变量传递给函数 fn(xing); }) }) </script> </head> <body> <ul> <li>☆</li> <li>☆</li> <li>☆</li> <li>☆</li> <li>☆</li> </ul> </body> </html>
10-13
1778
1778
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
