jQuery implementiert einen prozentualen Fortschrittsbalken

In diesem Artikel wird der spezifische Code von jQuery zur Realisierung des prozentualen Fortschrittsbalkens zu Ihrer Information bereitgestellt. Der spezifische Inhalt ist wie folgt

1. Betrachten Sie zuerst die Wirkung

2. Der Code lautet wie folgt

Der Code von jquery.lineProgressbar.js lautet wie folgt

(Funktion($){
 „streng verwenden“;
 
 $.fn.LineProgressbar = Funktion(Optionen){

  var Optionen = $.extend({
   Prozentsatz: null,
   ShowProgressCount: wahr,
   Dauer: 1000,

   // Styling-Optionen
   Füllhintergrundfarbe: '#3498db',
   Hintergrundfarbe: '#EEEEEE',
   Radius: '0px',
   Höhe: '10px',
   Breite: '100%'
  },Optionen);

  gib dies zurück.jedes(Funktion(Index, el) {
   // Auszeichnung
   $(el).html('<div class="progressbar"><div class="proggress"></div></div><div class="percentCount"></div>');
   


   var progressFill = $(el).find('.proggress');
   var progressBar = $(el).find('.progressbar');


   progressFill.css({
    Hintergrundfarbe: Optionen.Hintergrundfarbe füllen,
    Höhe: Optionen.Höhe,
    borderRadius: Optionen.Radius
   });
   progressBar.css({
    Breite: Optionen.Breite,
    Hintergrundfarbe: Optionen.Hintergrundfarbe,
    borderRadius: Optionen.Radius
   });

   // Fortschritte
   progressFill.animate(
    {
     Breite: Optionen.Prozentsatz + "%"
    },
    { 
     Schritt: Funktion(x) {
      if (Optionen.ShowProgressCount) {
       $(el).find(".percentCount").text("("+Math.round(x) + "分"+")");
      }
     },
     Dauer: Optionen.Dauer
    }
   );
  });
 }
})(jQuery);

Der Stilcode jquery.lineProgressbar.css lautet wie folgt

#progressbar1{
 Anzeige: Flex;
 Höhe: 15px;
}
.Fortschrittsbalken {
    Breite: 50%;
 Rand oben: 5px;
 Position: relativ;
 Hintergrund: #182746 !wichtig;
 Rahmenradius: 6px !wichtig;
 Box-Schatten: Einschub 0px 1px 1px rgba(0,0,0,.1);
}

.Fortschritt{
 Höhe: 8px;
 Breite: 10px;
 Hintergrund: linearer Farbverlauf (nach rechts, RGB (13, 93, 176), RGB (32, 177, 223)) !wichtig;
 Rahmenradius: 6px !wichtig;
}

.ProzentAnzahl{
 Leerzeichen: Nowrap;
 Rand links: 10px;
 Schriftgröße: 14px;
}

Auf diese Weise können Sie die Punkteleiste realisieren. Wenn es sich um einen Prozentsatz handelt, ändern Sie einfach die Punkte in %.

Nutze es direkt! ! !

Das Obige ist der vollständige Inhalt dieses Artikels. Ich hoffe, er wird für jedermanns Studium hilfreich sein. Ich hoffe auch, dass jeder 123WORDPRESS.COM unterstützen wird.

Das könnte Sie auch interessieren:

Einfacher jQuery-Implementierungscode für den Fortschrittsbalken
6 neue jQuery- und CSS3-Fortschrittsbalken-Plugins empfohlen
Teilen Sie 8 hervorragende jQuery-Ladeanimations- und Fortschrittsbalken-Plug-Ins
Ein einfaches Beispiel für einen Fortschrittsbalkeneffekt, implementiert mit jQuery
So implementieren Sie einen Fortschrittsbalken für den Dateiupload basierend auf HTML5 Ajax (jQuery-Version)
Einfaches Fortschrittsbalken-Steuerelement, geschrieben in Javascript, jquery, css
jQuery EasyUI API Chinesische Dokumentation - ProgressBar Fortschrittsbalken
jQuery implementiert Fortschrittsbalkeneffekte beim Dateiupload
So verwenden Sie jQuery, um Datei-Uploads zu überwachen und Fortschrittsbalkeneffekte zu implementieren
Verwenden Sie jQuery, um ein schönes, kreisförmiges Countdown-Plug-In für den Fortschrittsbalken zu implementieren

<<: So konfigurieren Sie pseudostatisches und clientadaptives Nginx

>>: Detaillierte Erläuterung der Verwendung von MySQL Explain (Analyseindex)