纯javascript五星评价功能效果

纯javascript五星评价功能效果:

javascript部分:

window.onload=function(){
var oBox=document.getElementById("star");
var oSpan=oBox.getElementsByTagName("span");
var iNer=document.getElementById("text");
var oText=["非常不满意!","一般不满意","不满意","满意","非常满意"];
for(var i=0;i<oSpan.length;i++){
oSpan[i].onmouseover=function(){
for(var j=0;j<this.id;j++){
oSpan[j].className="current";
}
};
var star=true;
oSpan[i].onmouseout=function(){
if(!star)return;
for(var j=0;j<this.id;j++){
oSpan[j].className="";
}
};
oSpan[i].onclick=function(){
if(!star){
star=true;
for(var j=0;j<this.id;j++){
text.innerHTML="";
}
}else{
star=false;
for(var j=0;j<this.id;j++){
text.innerHTML=oText[j]
}
}
};
}
}

div+css部分:

<div class="star" id="star">
<span id="1"></span>
<span id="2"></span>
<span id="3"></span>
<span id="4"></span>
<span id="5"></span>
</div>
<div id="text" class="text"></div>

 

<style>
div,span{padding:0;margin:0;}
.star{width:200px;height:28px; display:block; margin:0 auto;}
.star span{ display:inline-block;width:27px;height:28px; background:url(star.gif) no-repeat; cursor:pointer;}
.star .current{background:url(star.gif) no-repeat 0 -28px;}
.text{width:200px; margin:0 auto; text-align:center;height:30px; line-height:30px;}
</style>

 

 

 

发表评论

:?: :razz: :sad: :evil: :!: :smile: :oops: :grin: :eek: :shock: :???: :cool: :lol: :mad: :twisted: :roll: :wink: :idea: :arrow: :neutral: :cry: :mrgreen: