suchen

Heim >Web-Frontend >js-Tutorial >Implementierung des Code-Sharings des Sternebewertungseffekts in JavaScript

Implementierung des Code-Sharings des Sternebewertungseffekts in JavaScript

黄舟
黄舟Original
2017-05-21 11:38:541283Durchsuche

In diesem Artikel wird hauptsächlich JavaScript ausführlich vorgestellt, um einen einfachen Sternebewertungseffekt zu erzielen, der einen gewissen Referenzwert hat. Interessierte Freunde können sich auf die allgemeinen Implementierungsideen von

beziehen. Verwenden Sie einfach ein Grau Stern als Hintergrund, positionieren Sie dann das farbige Sternbild auf dem grauen Sternbild und steuern Sie die Breite des farbigen Sternbilds, 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.


Das obige ist der detaillierte Inhalt vonImplementierung des Code-Sharings des Sternebewertungseffekts in JavaScript. 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：Ausführliche Erläuterung von Beispielen für die seitenweise Betrachtung von BildernNächster Artikel：Ausführliche Erläuterung von Beispielen für die seitenweise Betrachtung von Bildern

In Verbindung stehende Artikel

Mehr sehen