一个评分的代码，很简单！
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <title>New Web Project</title> <style> #pingfen ul { 150px; margin: 10px auto; overflow: hidden; } #pingfen li { 20px; float: left; height: 20px; cursor: pointer; background: blue; border: 5px solid #fff; list-style: none; } #pingfen .active { background: red; } #num { text-align: center; font-size: 14px; color: blue; } </style> <script type="text/javascript"> window.onload = function(){ try { var oLi = document.getElementsByTagName('li'); var oNum = document.getElementById('num'); var num = 0; var i = 0; for (i = 0; i < oLi.length; i++) { oLi[i].index = i; oLi[i].onmouseover = function(){ for (i = 0; i < oLi.length; i++) { oLi[i].className = ''; } for (i = 0; i <= this.index; i++) { oLi[i].className = 'active'; } } oLi[i].onmouseout = function(){ for (i = 0; i < oLi.length; i++) { oLi[i].className = ''; } for (i = 0; i <= num; i++) { oLi[i].className = 'active'; } } oLi[i].onclick = function(){ num = this.index; oNum.innerHTML = num + 1; for (i = 0; i <= this.index; i++) { oLi[i].className = 'active'; } } } } catch (e) { alert('页面异常'); }; } </script> </head> <body> <div id="pingfen"> <ul> <li> </li> <li> </li> <li> </li> <li> </li> <li> </li> </ul> </div> <p id="num"> 0 </p> </body> </html>