suchen

Heim  >  Artikel  >  Web-Frontend  >  Ausführliche Erläuterung von Beispielen für die Vervollständigung der Sternebewertungsfunktion durch JS

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

Y2J
Y2JOriginal
2017-05-20 13:19:512318Durchsuche

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>

Es werden zwei Bilder verwendet.


[Verwandte Empfehlungen]

1 Javascript kostenloses Video-Tutorial

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

3

nodejs+websocket vervollständigt eine Chat-Systemfunktion

4.

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!

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
Vorheriger Artikel：Js vollständiger Countdown-ZeitdifferenzeffektNächster Artikel：Js vollständiger Countdown-Zeitdifferenzeffekt

In Verbindung stehende Artikel

Mehr sehen