JS动效--星星评分

 1 <!DOCTYPE html>
 2 <html lang="en">
 3 <head>
 4     <meta charset="UTF-8">
 5     <meta name="viewport" content="width=device-width, initial-scale=1.0">
 6     <meta http-equiv="X-UA-Compatible" content="ie=edge">
 7     <title>星星评分</title>
 8 </head>
 9 <style>
10     .container{
11         float: left;
12     }
13     .score{
14         float: left;
15         position: relative;
16         width: 100px;
17         margin-top: 5px;
18         margin-left: 10px;
19     }
20     span{
21         display: none;
22         position: absolute;
23         font-size: 14px;
24         text-shadow: 0px 0px 2px red;
25         left: 0;
26         top: 0;
27     }
28     .scoreDisplay{
29         display: block;
30     }
31 </style>
32 <body>
33     <!-- 初始的时候都是空星图片 -->
34     <div class="container">
35         <img src="./images/empty.png" alt="0">
36         <img src="./images/empty.png" alt="1">
37         <img src="./images/empty.png" alt="2">
38         <img src="./images/empty.png" alt="3">
39         <img src="./images/empty.png" alt="4">
40     </div>
41     <div class="score">
42         <span class="scoreDisplay">很差</span>
43         <span>较差</span>
44         <span>一般</span>
45         <span>较好</span>
46         <span>很好</span>
47     </div>
48     <script>
49         let imgs = document.getElementsByTagName("img");
50         let span = document.getElementsByTagName("span");
51         let k = -1;  //声明变量k并给一个初值 -1 ，不然后面的第一个星星始终是亮的
52         //k 为全局变量
53         //鼠标移入 事件处理程序
54         let enter = function(){
55             for(let i = 0; i<imgs.length;i++){
56                 span[i].setAttribute("class","");
57                 imgs[i].setAttribute("src","./images/empty.png");
58             }
59 
60             let starIndex = this.alt;
61             for(let i = 0;i<=starIndex;i++){
62                 imgs[i].setAttribute("src","./images/shining.png");
63             }
64             span[starIndex].setAttribute("class","scoreDisplay");
65         }
66 
67         //鼠标移出时事件处理程序
68         let out = function(){
69             for(let i = 0;i<span.length;i++){
70                 span[i].setAttribute("class","");
71                 imgs[i].setAttribute("src","./images/empty.png");
72             }
73             for(let i = 0;i<=k;i++){
74                 imgs[i].setAttribute("src","./images/shining.png");
75             }
76             if(k === -1){
77                 for(let i = 0;i<span.length;i++){
78                     span[i].setAttribute("class","");
79                 }
80             }
81             else{
82                 span[k].setAttribute("class","scoreDisplay");
83             }
84         }
85 
86         //鼠标点击事件处理程序 使用k来记录当前星星的下标值
87         let starClick = function(){
88             k = this.alt;
89         }
90 
91         //for通过循环给所有img添加事件
92         for(let i = 0;i<imgs.length;i++){
93             imgs[i].addEventListener("mouseenter",enter,false);
94             imgs[i].addEventListener("mouseleave",out,false);
95             imgs[i].addEventListener("click",starClick,false);
96         }
97     </script>
98 </body>
99 </html>

这个动效的关键使用一个全局变量k 随机记录当前鼠标所处的位置然后控制循环

使0-k的星星变亮（变亮的操作使通过setAttribute 改变src的路径实现）

然后如果有点击的事件发生的话就会固定k的值使得鼠标移出之后星星不会

变化重新点击会重新赋值

另外一个亮点，alt本身使在图片无法加载的时候显示的内容

有点鸡肋但是把alt设置为图片的下标访问alt的属性值就可以知道

当前是第几张图片

而且为了解决鼠标移出之后所有星星都熄灭

k的值应该设置为 -1

右边的文字内容也是k来控制

每次都要需要清空所有span的类名

然后在通过k的值给对应的span 设置类名

就显示出星星对应的评价 display：block

每次事件都会reset 然后重新根据新的事件产生新的

效果

这周学习了BOM 和 DOM 事件

DOM中的操作相当多怎样能快速找到需要的节点就很重要

有些获取的是元素的集合需要通过下标来找到对应的元素

就算只有一个元素通过className获取的也是一个集合

具体方法太多我也记不住了

猜你喜欢