js实现星星打分效果

具体实现效果

1. 鼠标移上的时候星星点亮，鼠标移出的时候星星为灰
2. 鼠标移到某个星星上，它之前的所有星星都会亮。
3. 鼠标移到某个星星上并点击，会显示打分结果。
4. 鼠标点击的时候，它之前的所有星星都会亮。
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

            ul,li{
                list-style: none;
            }
            .starts,.starts ul{float:left;}
            .starts{padding-left:16px;padding-top:7px;}
            .starts ul li{float:left;color:#ddd;padding-right:3px;font-size:28px;cursor: pointer;}
            .starts ul li.on{color:red;}
            .starts ul span{display:inline;float:left;padding-left:10px;margin-top: 10px;}

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';
                   }
                  }
                 }
                }