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获取的也是一个集合
具体方法太多 我也记不住了