JS/JQuery两种代码实现五星评分案例_五个五角星评分代码实现

作者：weixin_40725706 | 2024-02-15 13:54:58

踩

五个五角星评分代码实现

功能实现

//实现五星评分效果

	/**
	 * 功能1  鼠标移入某星 该星和之前的星变色
	 * 			  鼠标移出 都不变色
	 * 
	 * 功能2  点击某星  该星和之前的星变色
	 * 				鼠标移出  保持变色
	 * 
	 * 难点   给该星注册两种事件
	 */
1
2
3
4
5
6
7
8
9

实现效果

在这里插入图片描述

代码

<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <title>五角星评分案例</title>
  <style>
    * {
      padding: 0;
      margin: 0;
    }
    
    #comment {
      font-size: 40px;
      color: #ff16cf;
    }
    
   #comment li {
      float: left;
    }
    .current{
			/* color:blueviolet ; */
		}
    ul {
      list-style: none;
    }
  </style>
  <!-- <script src="jquery-1.12.4.js"></script>   //文件自己引
  <script>
    $(function () {
      
      //1. 给li注册鼠标经过事件，让自己和前面所有的兄弟都变成实心
      var wjx_k = "☆";
      var wjx_s = "★";
      $(".comment>li").on("mouseenter", function () {
        $(this).text(wjx_s).prevAll().text(wjx_s);
        $(this).nextAll().text(wjx_k);
      });
      
      //2. 给ul注册鼠标离开时间，让所有的li都变成空心
      $(".comment").on("mouseleave", function () {
        $(this).children().text(wjx_k);
        
        //再做一件事件，找到current，让current和current前面的变成实心就行。
        $("li.current").text(wjx_s).prevAll().text(wjx_s);
      });
      
      //3. 给li注册点击事件
      $(".comment>li").on("click", function () {
        $(this).addClass("current").siblings().removeClass("current");
      });
      
      
    });
  </script> -->
  
 
</head>

<body>
<ul id="comment">
  <li>☆</li>
  <li>☆</li>
  <li>☆</li>
  <li>☆</li>
  <li>☆</li>
</ul>
 <script type="text/javascript">
  	//实现五星评分效果
		
		/**
		 * 功能1  鼠标移入某星 该星和之前的星变色
		 * 			  鼠标移出 都不变色
		 * 
		 * 功能2  点击某星  该星和之前的星变色
		 * 				鼠标移出  保持变色
		 * 
		 * 难点   给该星注册两种事件
		 */
		//获取五星
		var lis=document.getElementById("comment").getElementsByTagName("li");
		console.log(lis.length);
		
		//注册鼠标移入事件
		for(var i=0;i<lis.length;i++)
		{
			lis[i].className="";
			lis[i].id=i;
	    //鼠标移入
			lis[i].onmouseover=function(){
			   index=this.id;
				// console.log(this.id);
				for(var j=0;j<=index;j++)
				{
					lis[j].innerHTML="★";
				}
			}
			//鼠标移出
			lis[i].onmouseout=function(){
				for(var i=0;i<lis.length;i++)
				{
					lis[i].innerHTML="☆";
				}
			var liCur=document.getElementsByClassName("current");
		
			for(var k=0;k<liCur.length;k++)
			 {
				lis[k].innerHTML="★";
				// console.log("我执行了");
			 }
			
			}
			
			//点击
			lis[i].onclick=function(){
		
				for(var o=0;o<=index;o++)
				{
					lis[o].className="current";
					lis[o].innerHTML="★";
				}
			}
		}
		
		
  </script>
</body>

</html>

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130

声明：本文内容由网友自发贡献，不代表【wpsshop博客】立场，版权归原作者所有，本站不承担相应法律责任。如您发现有侵权的内容，请联系我们。转载请注明出处：https://www.wpsshop.cn/w/weixin_40725706/article/detail/85027

JS/JQuery两种代码实现五星评分案例_五个五角星评分 代码实现

功能实现

实现效果

代码

JS/JQuery两种代码实现五星评分案例_五个五角星评分代码实现