<!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>
