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

Detaillierte Erläuterung der Einführung in die JavaScript-Funktion

Inhaltsverzeichnis Funktionseinführung Funktion E...

So fügen Sie eine Popup-Aktionsschaltfläche unten für „Select“ und „Cascader“ von Element-UI hinzu

Wie in der folgenden Abbildung dargestellt, ist e...

Warum der Befehl „explain“ MySQL-Daten ändern kann

Wenn Sie jemand fragen würde, ob die Ausführung v...

So installieren Sie ROS Noetic in Ubuntu 20.04

Haftungsausschluss: Da das Projekt die Verwendung...

Detaillierte Erläuterung der Datentypprobleme bei der JS-Array-Indexerkennung

Als ich ein WeChat-Applet-Projekt schrieb, gab es...

19 MySQL-Optimierungsmethoden im Datenbankmanagement

Nach der MySQL-Datenbankoptimierung kann nicht nu...

Tatsächlicher Datensatz zur Wiederherstellung der MySQL-Datenbank nach Zeitpunkt

Einführung: MySQL-Datenbankwiederherstellung nach...

MySQL Detaillierte Analyse vom Löschen der Datenbank bis zum Weglaufen_Fortgeschritten (I) - Datenintegrität

1. Einführung in die Datenintegrität 1. Einführun...

10 tödliche semantische Fehler in der Webtypografie

<br />Dies stammt aus dem Inhalt von „Web Fr...

Zusammenfassung verschiedener Replikationsmethoden für die MySQL Master-Slave-Replikation

Asynchrone Replikation Die MySQL-Replikation erfo...

Überwachen Sie Änderungen im MySQL-Tabelleninhalt und aktivieren Sie das MySQL-Binärprotokoll

Vorwort binlog ist eine binäre Protokolldatei, di...

Vue: Zwei Komponenten auf gleicher Ebene erreichen eine Wertübertragung

Vue-Komponenten sind verbunden, daher ist es unve...

So kommunizieren Sie zwischen dem WIN10-System und der internen Container-IP von Docker

1. Nach der Installation der Windows-Version von ...

js zur Realisierung einer einfachen Scheibenuhr

In diesem Artikel wird der spezifische Code von j...

Tipps zum Listenaufbau für Website-Wartungsseiten

Und oft ist es für Wartungsarbeiten erforderlich, ...