Ausführliche Erläuterung von Beispielen für die Vervollständigung der Sternebewertungsfunktion durch JS-js-Tutorial-php.cn

Ausführliche Erläuterung von Beispielen für die Vervollständigung der Sternebewertungsfunktion durch JS

Y2J

Freigeben： 2017-05-20 13:19:51

Original

2336 Leute haben es durchsucht

In diesem Artikel wird hauptsächlich JavaScript vorgestellt, um einen einfachen Sternebewertungseffekt im Detail zu erzielen. Es hat einen gewissen Referenzwert.

Die allgemeine Idee der Implementierung besteht darin, ein Grau zu verwenden Sterne als Hintergrund, positionieren Sie dann die farbigen Sternbilder auf den grauen Sternbildern und steuern Sie die Breite der farbigen Sternbilder, um den Grundeffekt zu erzielen. Wie unten gezeigt:

Der Code unten:

<html> 
<head> 
  <meta charset="UTF-8"> 
  <title>星星</title> 
  <style> 
    .starnone,.starWrap{ 
      width: 100px; 
      height: 20px; 
    } 
    .starnone{ 
      position: relative; 
      background: url(stars-none20px.png) no-repeat; 
    } 
    .star{ 
      position: absolute; 
      top: 0; 
      left: 0; 
      width: 70%; 
      height: 20px; 
      background: url(stars20px.png) no-repeat; 
    } 
    #num{ 
      width: 30px; 
    } 
  </style> 
</head> 
<body> 
  <p class="starnone"> 
    <p class="starWrap"> 
      <p class="star" id="star"></p> 
    </p> 
  </p> 
  <p> 
    <input type="text" id="num"> % 
    <button id="ok">OK</button> 
  </p> 
  <script> 
    window.onload = function(){ 
      var star = document.getElementById("star"); 
      var okBtn = document.getElementById("ok"); 
      var num = document.getElementById("num"); 
      okBtn.onclick = function(){ 
        var value = parseFloat(num.value); 
        if (value>100) { 
          alert("请小于100"); 
          return; 
        } else if(value<0){ 
          alert("请大于0"); 
          return; 
        } 
        star.style.width = value + "px"; 
      } 
    } 
  </script> 
</body> 
</html>

Nach dem Login kopieren

Es werden zwei Bilder verwendet.

[Verwandte Empfehlungen]

1 Javascript kostenloses Video-Tutorial

2 >Wie JS bestimmt, ob Text in voller oder halber Breite vorliegt

nodejs+websocket vervollständigt eine Chat-Systemfunktion

Js schließt den Countdown-Zeitdifferenzeffekt ab

5. Detaillierte Erläuterung der Methode zum rekursiven Löschen von Elementen in einem Array in JS

Das obige ist der detaillierte Inhalt vonAusführliche Erläuterung von Beispielen für die Vervollständigung der Sternebewertungsfunktion durch JS. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!