Native JavaScript-Implementierung des Fortschrittsbalkens

Der spezifische Code für JavaScript zur Implementierung des Fortschrittsbalkens dient Ihnen als Referenz. Der spezifische Inhalt ist wie folgt

Einführung in die Implementierung des Fortschrittsbalkens

Verwenden Sie JavaScript, um die Fortschrittsbalkenfunktion zu implementieren.

Prinzip: Ermitteln Sie die Distanz, die die Maus durch das Mausbewegungsereignis zurücklegt.

Schritt:

(1) DIV-Layout in HTML (2) Schreiben im CSS-Stil (3) Schreiben von Spezialeffekten in JavaScript

HTML Quelltext

<Text>
 <!-- Gesamtbox -->
 <div id="box">
 <!-- Fortschrittsbalken als Ganzes -->
 <div id="Fortschritt">
 <!-- Länge des Fortschrittsbalkens -->
  <div id="Fortschrittskopf"></div>
 <!-- Fortschrittsbalken-Bewegungsbalken -->
 <span id="span"></span>
 <div>
 <!-- Daten anzeigen -->
 <div id="Prozentsatz">0 %</div>
 </div>
</body>

CSS-Stile

<Stil>
 /* Allgemeiner Stil, Standardstil eliminieren*/
 Körper{
 Rand: 0;
 Polsterung: 0;
 }
 #Kasten{
 Position: relativ;
 Breite: 1000px;
 Höhe: 30px;
 Rand: 100px automatisch;
 } 
 #Fortschritt{
 Position: relativ;
 Breite: 900px;
 Höhe: 30px;
 Hintergrund: #999999;
 Rahmenradius: 8px;
 Rand: 0 automatisch; 
 }
 #Fortschrittskopf{
 Breite: 0px;
 Höhe: 100 %;
 Rahmen oben links – Radius: 8px;
 Rahmen unten links, Radius: 8px;
 Hintergrund: #9933CC;
 
 }
 Spanne{
 Position: absolut;
 Breite: 20px;
 Höhe: 38px;
 Hintergrund: #9933CC;
 oben: -4px;
 links: 0px;
 Cursor:Zeiger;
 }
 #Prozentsatz{
 Position: absolut;
 Zeilenhöhe: 30px;
 Textausrichtung: zentriert;
 rechts: -44px;
 oben: 0;
 }
 
 
</Stil>

JavaScript-Code

<Skript>

 //js Knoten abrufen var oProgress = document.getElementById('progress');
 var oProgress_head = document.getElementById('progress_head');
 var oSpan = document.getElementById('span');
 var oProzentsatz = document.getElementById('Prozentsatz')

 //Ereignis „Maustaste gedrückt“ hinzufügen oSpan.onmousedown=function(event){
 
 var Ereignis=Ereignis || Fenster.Ereignis;
 var x=event.clientX-oSpan.offsetLeft;

 document.onmousemove=Funktion(){
 
 var Ereignis=Ereignis || Fenster.Ereignis;
 var wX=event.clientX-x;
 
 
 wenn(wX<0)
 {
  wX=0;
 }sonst wenn(wX>=oProgress.offsetWidth-20)
 {
  wX = oFortschritt.OffsetWidth - 20;
 }
 oProgress_head.style.width=wX+'px';
 oSpan.style.left=wX+'px';
 
 oProzentsatz.innerHTML=parseInt(wX/(oProgress.offsetWidth-20)*100)+'%';
 
 gibt false zurück;
 };
 
 Dokument.onmouseup=Funktion(){
 
 Dokument.onmousemove=null; 
 };
 
 }; 
</Skript>

Rendern

Gesamtcode

<!DOCTYPE>
<html lang="de">
<Kopf>
 <meta http-equiv="Inhaltstyp" content="text/html; charset=utf-8" />
 <title>Fortschrittsbalken</title>
 <Stil>
 /* Allgemeiner Stil, Standardstil eliminieren*/
 Körper{
 Rand: 0;
 Polsterung: 0;
 }
 #Kasten{
 Position: relativ;
 Breite: 1000px;
 Höhe: 30px;
 Rand: 100px automatisch;
 } 
 #Fortschritt{
 Position: relativ;
 Breite: 900px;
 Höhe: 30px;
 Hintergrund: #999999;
 Rahmenradius: 8px;
 Rand: 0 automatisch; 
 }
 #Fortschrittskopf{
 Breite: 0px;
 Höhe: 100 %;
 Rahmen oben links – Radius: 8px;
 Rahmen unten links, Radius: 8px;
 Hintergrund: #9933CC;
 
 }
 Spanne{
 Position: absolut;
 Breite: 20px;
 Höhe: 38px;
 Hintergrund: #9933CC;
 oben: -4px;
 links: 0px;
 Cursor:Zeiger;
 }
 #Prozentsatz{
 Position: absolut;
 Zeilenhöhe: 30px;
 Textausrichtung: zentriert;
 rechts: -44px;
 oben: 0;
 }
 
 
 </Stil>
</Kopf>
<Text>

 <!-- Gesamtbox -->
 <div id="box">
 <!-- Fortschrittsbalken als Ganzes -->
 <div id="Fortschritt">
 <!-- Länge des Fortschrittsbalkens -->
  <div id="fortschritt_head"></div>
 <!-- Fortschrittsbalken-Bewegungsbalken -->
 <span id="span"></span>
 <div>
 <!-- Daten anzeigen -->
 <div id="Prozentsatz">0 %</div>
 </div>

</body>
</html>
<Skript>

 //js Knoten abrufen var oProgress = document.getElementById('progress');
 var oProgress_head = document.getElementById('progress_head');
 var oSpan = document.getElementById('span');
 var oProzentsatz = document.getElementById('Prozentsatz')

 //Ereignis „Maustaste gedrückt“ hinzufügen oSpan.onmousedown=function(event){
 
 var Ereignis=Ereignis || Fenster.Ereignis;
 var x=event.clientX-oSpan.offsetLeft;

 document.onmousemove=Funktion(){
 
 var Ereignis=Ereignis || Fenster.Ereignis;
 var wX=event.clientX-x;
 
 
 wenn(wX<0)
 {
  wX=0;
 }sonst wenn(wX>=oProgress.offsetWidth-20)
 {
  wX = oFortschritt.OffsetWidth - 20;
 }
 oProgress_head.style.width=wX+'px';
 oSpan.style.left=wX+'px';
 
 oProzentsatz.innerHTML=parseInt(wX/(oProgress.offsetWidth-20)*100)+'%';
 
 
 gibt false zurück;
 };
 
 Dokument.onmouseup=Funktion(){
 
 Dokument.onmousemove=null;
 
 };
 
 };
 
</Skript>

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:

Mehrere Methoden für den Javascript-Fortschrittsbalken
So implementieren Sie einen Fortschrittsbalken in js
Mit JavaScript lässt sich der Fortschrittsbalken zum Laden einer Webseite ganz einfach erreichen
js Fortschrittsbalken-Implementierungscode
Code-Organisation für die Implementierung des JS-Fortschrittsbalkeneffekts
JS realisiert den Effekt eines kreisförmigen Fortschrittsbalkens (von 0 bis 100 %)
Einfaches Fortschrittsbalken-Steuerelement, geschrieben in Javascript, jquery, css
Fortschrittsbalkeneffekt mit CSS+JS implementiert
js realisiert die Audiosteuerungs-Fortschrittsbalkenfunktion
Verwenden der Sitzung mit Javascript in PHP zum Implementieren der Fortschrittsbalkenfunktion für den Dateiupload

<<: Grafische Installationsschritte für VMware vSphere 6.7 (ESXI 6.7)

>>: Mehrere Methoden zum Ändern des MySQL-Root-Passworts (empfohlen)