网购五星评分模拟：
1 <!DOCTYPE html>
2 <html lang="en">
3 <head>
4 <meta charset="UTF-8">
5 <title>Document</title>
6 <script type="text/javascript" src="jquery.js"></script>
7 </head>
8 <body>
9 <div>
10 <span class="star">☆</span>
11 <span class="star">☆</span>
12 <span class="star">☆</span>
13 <span class="star">☆</span>
14 <span class="star">☆</span>
15 </div>
16 </body>
17 <script type="text/javascript">
18 var isclick = 0;
19 var clicknum = 0;
20 //鼠标滑过，编程黑五角星
21 $(‘span‘).mouseover(function(){
22 // if (isclick==0) {
23 var num = $(this).index();
24 // alert(num);
25 $(‘span‘).each(function(){
26 if ($(this).index()<=num) {
27 $(this).html(‘★‘);
28 }else{
29 if ($(this).index()>clicknum) {
30 $(this).html(‘☆‘);
31 }
32 }
33 });
34 // }
35 });
36 //鼠标离开div，变回空心五角星
37 $(‘div‘).mouseleave(function(){
38 if (isclick==0) {
39 $(‘span‘).each(function(){
40 if ($(this).index()>clicknum) {}
41 $(this).html(‘☆‘);
42 });
43 }else{
44 $(‘span‘).each(function(){
45 if ($(this).index()>clicknum) {
46 $(this).html(‘☆‘);
47 }
48 });
49 }
50 });
51 //鼠标点击，固定黑五角星，并且重新点击后重新固定，离开后不变
52 $(‘span‘).click(function(){
53 isclick = 1;
54 clicknum = $(this).index();
55 $(‘span‘).each(function(){
56 if ($(this).index()<=clicknum) {
57 $(this).html(‘★‘);
58 }else{
59 $(this).html(‘☆‘);
60 }
61 });
62 });
63 </script>
64 </html>
时间： 2024-09-30 14:40:29