<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> <style> body{font-family: "Microsoft YaHei",serif;} body,dl,dd,p,h1,h2,h3,h4,h5,h6{margin: 0;} ol,ul,li{margin: 0;padding: 0;list-style: none;} img{border: none} #wrap{ margin: 50px auto; width: 400px; height: 80px; user-select: none; } #wrap .title,#wrap .list,#wrap .txt{ float: left; } #wrap .title{ color: red; line-height: 80px; } #wrap .list{ width: 102px; height: 20px; margin: 30px 20px 0; } #wrap .list li{ float: left; width: 20px; height: 20px; background-image: url("img/7.png"); cursor: pointer; } #wrap .list li.light{ background-image: url("img/6.png"); } #wrap .txt{ width: 120px; height: 78px; border: 1px dashed #aaa; } </style> </head> <body> <div id="wrap"> <span class="title">星际评分:</span> <ul class="list"> <li></li> <li></li> <li></li> <li></li> <li></li> </ul> <p class="txt">提示:请认真给当前文章打分</p> </div> <script> (function () { let oUl = document.querySelector("#wrap .list"), aLi = document.querySelectorAll("#wrap .list li"), oTxt = document.querySelector("#wrap .txt"), len = aLi.length, index = -1, arrText = [ "提示:请认真给当前文章打分", "超级差评", "差评", "一般", "好看", "真的好看", ]; //这是aLi的移入事件 for (let i=0;i<len;i++){ // 鼠标移入事件 aLi[i].onmouseenter = function () { for (let j=0;j<len;j++){ aLi[j].className = (j<=i)?"light":""; } oTxt.innerHTML = arrText[i+1]; //可以改写为三目运算 // for (let j=0;j<len;j++){ // if (j<=i){ // aLi[j].className = 'light'; // } else { // aLi[j].className = ''; // } // } // 下面性能更佳,不涉及判断 // // 从0到移入序号的aLi加名字 // for(let j=0;j<=i;j++){ // aLi[j].className = 'light'; // } // // 从移入序号到最大长度去掉名字 // for(let j=i+1;j<len;j++){ // aLi[j].className = ''; // } }; aLi[i].onclick = function () { index = i; }; } //这是ul的移出事件 oUl.onmouseleave = function () { for (let i=0;i<len;i++){ aLi[i].className = i<=index?"light":""; } oTxt.innerHTML = arrText[index+1]; } })(); </script> </body> </html>