js, um den Effekt von Mall-Star-Rating_Javascript-Fähigkeiten zu erzielen

Hier möchte ich mit meinen Freunden die Wirkung der Verwendung von js teilen, um im Einkaufszentrum eine Sternebewertung zu erzielen. Natürlich müssen bessere Spezialeffekte von allen verbessert werden.

Der HTML-Code lautet wie folgt:

<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-Stil:

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

Der letzte js-Aufruf lautet wie folgt:

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

Das Obige ist der gesamte Inhalt dieses Artikels. Ich hoffe, dass er für alle beim Erlernen der JQuery-Programmierung hilfreich sein wird.