Maison > Article > interface Web > Javascript implémente les compétences function_javascript d'évaluation cinq étoiles

Javascript implémente les compétences function_javascript d'évaluation cinq étoiles

WBOYoriginal: 2016-05-16 15:33:001920parcourir

Cet article partage avec vous l'exemple de code JavaScript pour implémenter la fonction de notation cinq étoiles. Vous pouvez vous y référer et en tirer des leçons. La méthode d'implémentation spécifique est la suivante

Avant de partager l'exemple de code d'implémentation de la fonction d'évaluation cinq étoiles en JavaScript, jetons un œil au rendu :

étoile1.png étoile1.png

Code spécifique :

<!DOCTYPE html>
<html lang="en">
<head>
 <meta charset="UTF-8">
 <title>53</title>
 <script src='js/jquery-1.11.1.js'></script>
 <style>
  *{
   margin: 0;
   padding: 0;
  }
  body{
   padding: 20px;
  }
  .star1{
   width: 70px;
   height: 13px;
   background: url('images/star1.png') repeat-x left center;
  }
  .star2{
/*   width: 60%;*/
   height: 13px;
   background: url('images/star2.png') repeat-x left center;
   float: left;
  }
 </style>
 <script>
  $(function(){
   var fiveStars=function(num){
   if(!num||num<3){
    return '--';
   }
   return '<div class="star1"><div class="star2" style="width:'+num*20+'%"></div></div>';
   }
  var str=fiveStars(4)
  $('body').html(str)
  
  })
 </script>
</head>
<body>
<!--<div class='star1'><div class="star2"></div></div> -->
</body>
</html>

J'espère que cet article sera utile à tout le monde dans l'apprentissage de la programmation javascript.

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：Résumé de quelques points importants à noter dans les fonctions JavaScript et les compétences js anonymes function_javascriptArticle suivant：Résumé de quelques points importants à noter dans les fonctions JavaScript et les compétences js anonymes function_javascript

Articles Liés

Voir plus