<!DOCTYPE html> <html lang="zh-CN"> <head> <meta charset="utf-8"> <title>JS评分效果</title> <style> *{margin:0;padding:0;} .pingfen{ width:220px;margin:10px auto;height:28px;} .pingfen li{ width:27px;float:left;height:28px; cursor:pointer;background:url(http://yinhu.xinnet.tzjdwl.cn/test/score/images/star.gif) no-repeat 0 0; list-style:none;} .pingfen span{height: 28px;line-height: 28px;float: right;font-size: 18px;} </style> </head> <body> <div id="pingfen" class="pingfen"> <ul> <li></li> <li></li> <li></li> <li></li> <li></li> </ul> <span class="text"></span> </div> <div id="pingfen2" class="pingfen"> <ul> <li></li> <li></li> <li></li> <li></li> <li></li> </ul> <span class="text"></span> </div> <div id="pingfen3" class="pingfen"> <ul> <li></li> <li></li> <li></li> <li></li> <li></li> </ul> <span class="text"></span> </div> <script> window.onload=function(){ function score(id){ var oPf=document.getElementById(id); var aLi=oPf.getElementsByTagName('li'); var oText=oPf.getElementsByTagName('span')[0]; var description = ['失望','不满','一般','满意','惊喜',] var i=0; for(i=0;i<aLi.length;i++){ aLi[i].index=i; aLi[i].onmouseover=function(){ for(i=0;i<aLi.length;i++){ if(i<=this.index) { // console.log(i,this.index); aLi[i].style.backgroundPosition="0 -29px"; oText.innerText=(this.index+1)+'分 '+description[i]; } else { aLi[i].style.backgroundPosition="0 0"; } // if() } }; aLi[i].onmouseout=function (){ oText.innerText=''; }; aLi[i].onmousedown=function () { // alert('提交成功:'+(this.index+1)+'分'); oText.innerText=(this.index+1)+'分 '+description[this.index]; }; } } score('pingfen'); score('pingfen2'); score('pingfen3'); }; </script> </body> </html>
