Heim > Artikel > Web-Frontend > Javascript implementiert eine Fünf-Sterne-Bewertungsfunktion_Javascript-Fähigkeiten

Javascript implementiert eine Fünf-Sterne-Bewertungsfunktion_Javascript-Fähigkeiten

WBOYOriginal: 2016-05-16 15:33:001920Durchsuche

Dieser Artikel stellt Ihnen den Beispielcode von JavaScript zur Implementierung der Fünf-Sterne-Bewertungsfunktion vor. Sie können darauf zurückgreifen und daraus lernen. Die spezifische Implementierungsmethode ist wie folgt

Bevor wir den Beispielcode für die Implementierung der Fünf-Sterne-Bewertungsfunktion in JavaScript teilen, werfen wir einen Blick auf das Rendering:

star1.png star1.png

Spezifischer Code:

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

Ich hoffe, dass dieser Artikel allen beim Erlernen der Javascript-Programmierung hilfreich sein wird.

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：Zusammenfassung einiger wichtiger Punkte, die bei JavaScript-Funktionen und anonymen JavaScript-Funktionen zu beachten sindNächster Artikel：Zusammenfassung einiger wichtiger Punkte, die bei JavaScript-Funktionen und anonymen JavaScript-Funktionen zu beachten sind

In Verbindung stehende Artikel

Mehr sehen