Implementierung des Code-Sharings des Sternebewertungseffekts in JavaScript-js-Tutorial-php.cn

Implementierung des Code-Sharings des Sternebewertungseffekts in JavaScript

黄舟

Freigeben： 2017-05-21 11:38:54

Original

1231 Leute haben es durchsucht

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>

Nach dem Login kopieren

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!