js星星评分效果
html如下：
<divclass="starts"> <ulid="pingStar"> <lirel="1"title="特别差，给1分"></li> <lirel="2"title="很差，给2分"></li> <lirel="3"title="一般般，给3分"></li> <lirel="4"title="很好，给4分"></li> <lirel="5"title="非常好，给5分"></li> <spanid="dir"></span> </ul> <inputtype="hidden"value=""id="startP"> </div>
css样式：
.starts,.startsul{float:left;}
.starts{padding-left:16px;padding-top:7px;}
.startsulli{width:32px;height:31px;float:left;background:#ddd;padding-right:3px;}
.startsulli.on{background:red;}
.startsulspan{display:inline;float:left;padding-left:10px;height:31px;line-height:31px;}
最后js调用如下:
window.onload=function(){
vars=document.getElementById("pingStar"),
m=document.getElementById('dir'),
n=s.getElementsByTagName("li"),
input=document.getElementById('startP');//保存所选值
clearAll=function(){
for(vari=0;i<n.length;i++){
n[i].className='';
}
}
for(vari=0;i<n.length;i++){
n[i].onclick=function(){
varq=this.getAttribute("rel");
clearAll();
input.value=q;
for(vari=0;i<q;i++){
n[i].className='on';
}
m.innerHTML=this.getAttribute("title");
}
n[i].onmouseover=function(){
varq=this.getAttribute("rel");
clearAll();
for(vari=0;i<q;i++){
n[i].className='on';
}
}
n[i].onmouseout=function(){
clearAll();
for(vari=0;i<input.value;i++){
n[i].className='on';
}
}
}
}
查看演示http://demo.jb51.net/js/2014/jsxxdf/
如果有喜欢使用基于jquery的星星打分效果，可以参考这个地址：https://www.nhooo.com/jiaoben/195077.html