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 the let imgs = document.getElementsByTagName ( " IMG " ); 50 the let span = document.getElementsByTagName ( " span " ); 51 is the let k = - . 1 ; // declare a variable k and a First -1, or behind the first star is always bright 52 is // K global variables 53 // into mouse event handler 54 is the let Enter = function () { 55 for (the 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 the else { 82 span [K] .setAttribute ( " class " , " scoreDisplay " ); 83 } 84 } 85 86 // mouse click event handler index k to record the current value of the stars 87 the 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>
The effect of moving the position of a global variable key k using the random recording current mouse in which the control cycle then
0-k to make the star lit (lit so that the operation of changing the path implementation setAttribute by src)
Then click on the event if there is, then the value of k will be fixed so that the mouse will not be removed after the stars
Click again will re-assignment changes
Another highlight, alt itself so that what is displayed when the picture could not be loaded
Bit tasteless but the alt attribute value of the index is set to visit alt pictures can know
Current is the first few pictures
And in order to solve the mouse out after all the stars are off
The value of k should be set to -1
K is the text on the right to control
Every time span required to clear all the class name
Then a value k corresponding to the class name provided span
Evaluation of the stars on the show corresponding display: block
Every event will reset and re-generate new under the new event
effect
This week learning the BOM and DOM events
DOM operations quite a bit how to quickly find the desired nodes is important
Some have obtained is a collection of elements need to find the corresponding elements by index
Even if only one element acquired by className is also a collection of
I can not remember too many specific method of