html::
<div> <ul id="pingStar"> <li rel="1"></li> <li rel="2"></li> <li rel="3"></li> <li rel="4"></li> <li rel="5"></li> <span id="dir"></span> </ul> <input type="hidden" value="" id="startP"></div>
CSS样式:
。跨度{display:inline; float:左; padding-left:10px;高度: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'; }}}}}查看演示http://demo.vevb.com/js/2014/jsxxdf/
如果有喜欢使用基于jQuery的星星打分效果,可以参考这个地址://www.vevb.com/jiaoben/195077.html