Heim  >  Artikel  >  Web-Frontend  >  js, um den Effekt von Mall-Star-Rating_Javascript-Fähigkeiten zu erzielen

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

WBOY
WBOYOriginal
2016-05-16 15:22:501554Durchsuche

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.

Stellungnahme:
Der Inhalt dieses Artikels wird freiwillig von Internetnutzern beigesteuert und das Urheberrecht liegt beim ursprünglichen Autor. Diese Website übernimmt keine entsprechende rechtliche Verantwortung. Wenn Sie Inhalte finden, bei denen der Verdacht eines Plagiats oder einer Rechtsverletzung besteht, wenden Sie sich bitte an admin@php.cn