Maison >interface Web >js tutoriel >Partage de code d'implémentation de l'effet de notation par étoiles en JavaScript

Partage de code d'implémentation de l'effet de notation par étoiles en JavaScript

黄舟original: 2017-05-21 11:38:541282parcourir

Cet article présente principalement en détail JavaScript pour obtenir un simple effet de notation par étoiles, qui a une certaine valeur de référence. Les amis intéressés peuvent se référer aux idées générales de mise en œuvre de

Utilisez simplement un gris. étoile comme arrière-plan, puis positionnez l'image de l'étoile colorée sur l'image de l'étoile grise et contrôlez la largeur de l'image de l'étoile colorée pour obtenir l'effet de base. Comme indiqué ci-dessous :

Le code ci-dessous :

<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>

Deux images utilisées.

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!

Déclaration：

Le contenu de cet article est volontairement contribué par les internautes et les droits d'auteur appartiennent à l'auteur original. Ce site n'assume aucune responsabilité légale correspondante. Si vous trouvez un contenu suspecté de plagiat ou de contrefaçon, veuillez contacter admin@php.cn

Article précédent：Explication détaillée d'exemples de visualisation paginée d'imagesArticle suivant：Explication détaillée d'exemples de visualisation paginée d'images

Articles Liés

Voir plus