star1.png  
Heim > Web-Frontend > js-Tutorial > Javascript implementiert eine Fünf-Sterne-Bewertungsfunktion_Javascript-Fähigkeiten

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

WBOY
Freigeben: 2016-05-16 15:33:00
Original
1971 Leute haben es durchsucht

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>
Nach dem Login kopieren
Ich hoffe, dass dieser Artikel allen beim Erlernen der Javascript-Programmierung hilfreich sein wird.

Quelle:php.cn
Erklärung dieser Website
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
Beliebte Tutorials
Mehr>
Neueste Downloads
Mehr>
Web-Effekte
Quellcode der Website
Website-Materialien
Frontend-Vorlage