五星评分
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Document</title> <style> *{margin: 0;padding: 0;} #ul{list-style:none;height:27px;float:left;} #ul li{width:27px;height:27px;background:url('images/star.gif') no-repeat;float:left;} #div{width:100px;height:27px;line-height:27px;float:left;color:green;margin-left: 10px;} </style> </head> <body> <ul id="ul"> <li></li> <li></li> <li></li> <li></li> <li></li> </ul> <div id="div"></div> <script> // 给个li 对象 var lis = document.getElementsByTagName('li'); var ulObj=document.getElementById('ul'); var divObj=document.getElementById('div'); var bj = false; // 表示没有评分 for(var i=0;i<lis.length;i++){ // 给每个 li 自定义一个 索引 lis[i].index = i; // 给每个 li 绑定移入事件 lis[i].onmouseover = function(){ if(!bj){ for(var i=0;i<lis.length;i++){ if(i<=this.index){ // 改变星星 背景图片的位置 让星星变亮 lis[i].style.backgroundPosition = '0 -29px'; } } } } // 给每个 li 绑定点击事件 // 用户点击 就表示 确定评分了 lis[i].onclick = function(){ if(!bj){ bj = true; // 把评分结果 写到 容器中 divObj.innerHTML = this.index+1+' 星'; } } } // 鼠标移出 让星星 变灰色 ulObj.onmouseout = function(){ if(!bj){ for(var i=0;i<lis.length;i++){ lis[i].style.backgroundPosition = '0 0'; } } } </script> </body> </html>