Native JavaScript-Implementierung des Fortschrittsbalkens

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)

Artikel empfehlen

Installieren Sie Windows Server 2019 auf VMware Workstation (Grafisches Tutorial)

Wenn Sie aufgefordert werden, einen Schlüssel ein...

Nachdem die mybatis-plus-Paging-Parameter übergeben wurden, enthält die SQL-Where-Bedingung keine Limit-Paging-Informationsoperation

Ich habe fast zwei Stunden damit verbracht, versc...

Beispiele für die Verwendung des ES6-Spread-Operators

Inhaltsverzeichnis Was sind Spread- und Rest-Oper...

Implementierung der Leistungsoptimierung des Element-Shuttle-Frames

Inhaltsverzeichnis Hintergrund Lösung Neue Fragen...

Hbase – Erste Schritte

1. HBase-Übersicht 1.1 Was ist HBase? HBase ist e...

Lösen Sie das Problem inkonsistenter Front- und Back-End-Ports von Vue

Die Front- und Back-End-Ports von Vue sind inkons...

Paketieren, Zusammenführen und Komprimieren von Vue-Projekten zur Optimierung der Reaktionsgeschwindigkeit von Webseiten

Inhaltsverzeichnis Vorwort 1. Der Anforderungsinh...

Chinesische Parameterbeschreibung und Verwendungsbeispiele für ffmpeg

1. Wenn ffmpeg Videodateien überträgt, können die...

Detaillierte Erklärung, wann Javascript-Skripte ausgeführt werden

JavaScript-Skripte können überall in HTML eingebe...

Installieren Sie das komprimierte MySQL5.7-Paket schnell unter Windows

In diesem Artikel erfahren Sie, wie Sie das kompr...

Detaillierte Erläuterung des Beispielcodes für das elastische CSS3 Flex-Layout

1. Grundlegende Konzepte //Jeder Container kann a...

Detaillierte Erklärung des Lebenszyklus von Angular-Komponenten (Teil 2)

Inhaltsverzeichnis 1. Haken anzeigen 1. Was bei d...

Lösung für das Problem des Informationsverlusts mit "_" im Header bei Verwendung des Nginx-Proxys

Vorwort Bei der Entwicklung eines Gateway-Projekt...

Unterschiede und Anwendungsbeispiele von for, for...in, for...of und forEach in JS

for-Schleife Grundlegendes Syntaxformat: für (Var...

Lösungen für Unterschiede in der Browserinterpretation hinsichtlich Größe, Breite und Höhe in CSS

Schauen wir uns zunächst ein Beispiel an Code kopi...