javascript代码实现简单的五星评价功能！

最新推荐文章于 2024-03-06 20:14:13 发布

转载最新推荐文章于 2024-03-06 20:14:13 发布 · 197 阅读

0 ·

CC 4.0 BY-SA版权

原文链接：http://www.cnblogs.com/2333/p/4719319.html

文章标签：

#javascript #ViewUI

本文介绍了一种使用JavaScript实现的动态评分系统，通过鼠标悬停和点击事件改变页面上星星的显示状态，实现用户评分功能。系统能响应用户的鼠标操作，实时更新评分，并在鼠标离开时保存评分状态。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

 1 <script type="text/javascript">
 2             //★
 3             var spans=document.getElementsByTagName("span");
 4             var flag=5;//这个值随便取，只要不是01234就行
 5             var Expand=function(){
 6                 //扩展代码，暂无
 7             };
 8             
 9             onload=function(){
10                 //循环载入鼠标移入事件
11                 for(var i=0;i<spans.length;i++){
12                     spans[i].onmouseover=function(){
13                         var id=parseInt(this.id);
14                             for(var i=0;i<=id;i++){
15                                 spans[i].innerHTML="★";
16                             }
17                             for(var j=id+1;j<5;j++){
18                                 spans[j].innerHTML="☆";
19                             }
20                     };
21                 }
22                 //循环载入鼠标点击星星事件
23                 for(var i=0;i<spans.length;i++){
24                     spans[i].onclick=function(){
25                         var id=parseInt(this.id);
26                         flag=id;
27                         for(var i=0;i<=id;i++){
28                             spans[i].innerHTML="★";
29                         }
30                         Expand();//这里是鼠标点击星星的扩展，例如出现分值之类的，总之要扩展什么随你的大小便啦~
31                     };
32                 }
33                 //载入鼠标离开div事件
34                 document.getElementById("div").onmouseout=function(){
35                     //如果tag是3，则循环给把0 1 2 3几个星星整黄
36                     if(flag>=0 && flag<=4){
37                         for(var i=0;i<=flag;i++){
38                             spans[i].innerHTML="★";
39                             
40                         }
41                         for(var j=flag+1;j<5;j++){
42                             spans[j].innerHTML="☆";
43                         }
44                     }
45                     //如果tag没有值或者是初值5，则把所有的星星还原成空星星
46                     else{
47                         for(var i=0;i<spans.length;i++)
48                         {
49                             spans[i].innerHTML="☆";
50                         }
51                     }
52                 };
53             };
54                 
55         </script>
56     </head>


57     <body>
58         <div id="div">
59             <span id="0">☆</span><span id="1">☆</span><span id="2">☆</span><span id="3">☆</span><span id="4">☆</span>
60         </div>
61     </body>
　　我是新手，优化还不够，欢迎指正