js实现商城星星评分的效果

在这里和朋友们分享一个使用js实现商城星星评分的效果，希望能给大家点帮助，当然更好的特效还有待大家完善。
html如下：

<div class="starts"><ul id="pingStar"><li rel="1" title="特别差，给1分"></li><li rel="2" title="很差，给2分"></li><li rel="3" title="一般般，给3分"></li><li rel="4" title="很好，给4分"></li><li rel="5" title="非常好，给5分"></li><span id="dir"></span></ul><input type="hidden" value="" id="startP"></div>

css样式：

.starts,.starts ul{float:left;}.starts{padding-left:16px;padding-top:7px;}.starts ul li{width:32px;height:31px;float:left;background:#ddd;padding-right:3px;}.starts ul li.on{background:red;}.starts ul span{display:inline;float:left;padding-left:10px;height:31px;line-height:31px;}

最后js调用如下:

window.onload = function （） {var s = document.getElementById（"pingStar"）,m = document.getElementById（"dir"）,n = s.getElementsByTagName（"li"）,input = document.getElementById（"startP"）; //保存所选值clearAll = function （） {for （var i = 0; i < n.length; i++） {n[i].className = "";}}for （var i = 0; i < n.length; i++） {n[i].onclick = function （） {var q = this.getAttribute（"rel"）;clearAll（）;input.value = q;for （var i = 0; i < q; i++） {n[i].className = "on";}m.innerHTML = this.getAttribute（"title"）;}n[i].onmouseover = function （） {var q = this.getAttribute（"rel"）;clearAll（）;for （var i = 0; i < q; i++） {n[i].className = "on";}}n[i].onmouseout = function （） {clearAll（）;for （var i = 0; i < input.value; i++） {n[i].className = "on";}}}}

以上就是本文的全部内容，希望对大家的学习jquery程序设计有所帮助。