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