JavaScript implementiert einen verschiebbaren Fortschrittsbalken

JavaScript implementiert einen verschiebbaren Fortschrittsbalken

In diesem Artikel wird der spezifische JavaScript-Code zur Implementierung eines verschiebbaren Fortschrittsbalkens zu Ihrer Information bereitgestellt. Der spezifische Inhalt ist wie folgt

1. Implementierung des Fortschrittsbalkens

<html>
<Kopf>
  <meta http-equiv="X-UA-kompatibel" content="IE=edge">
  <meta name="viewport" content="width=Gerätebreite, Anfangsmaßstab=1">
  <meta charset="UTF-8">
<title>Ziehbarer Fortschrittsbalken</title>
<Stil>
Körper{
 Rand: 50px; ; 
}

.Kasten {
  Breite: 49 %;
  Höhe: 3rem;
  Zeilenhöhe: 3rem;
  schweben: links;
}
.boxDesc {
  Breite: 50 %;
  Höhe: 3rem;
  Zeilenhöhe: 0,3rem;
  schweben: links;
}

.scale span{
 Hintergrund: URL (scroll.gif) keine Wiederholung; 
 Breite: 8px;
 Höhe: 16px; 
 Position: absolut; 
 links: -2px;
 oben: -5px;
 Cursor:Zeiger;
}
.scale{ Hintergrundwiederholung: Wiederholung x; Hintergrundposition: 0 100 %; Hintergrundfarbe: #E4E4E4; Rahmen links: 1px #83BBD9 durchgezogen; Breite: 100 %; Höhe: 10px; Position: relativ; Schriftgröße: 0px; Rahmenradius: 3px; }
.scale div{ Hintergrundwiederholung: Wiederholung-x; Hintergrundfarbe: grün; Position: absolut; Höhe: 10px; links: 0; unten: 0; }
li{
 Schriftgröße: 12px;
 Zeilenhöhe: 50px;
 Position: relativ; 
 Höhe: 50px; 
 Listenstil: keiner;
}
</Stil>
</Kopf>
<Text>
<ul Stil = 'Breite: 100 %; oberer Rand: 15rem;'>
 <li>
    <div-Klasse = "Box">
  <div Klasse="Skala" id="Balken">
   <div></div>
   <span id="btn"></span>
  </div> 
    </div>
  <div Klasse='boxDesc'>
  <span id="Titel">0</span>
  </div>
 </li>

</ul>
</body>
<Skript>
Skala = Funktion (btn, Balken, Titel) {
 dies.btn=document.getElementById(btn);
 dies.bar=document.getElementById(bar);
 this.title=document.getElementById(Titel);
 dieser.Schritt=this.bar.getElementsByTagName("DIV")[0];
 dies.init();
};
Maßstab.Prototyp={
 init:Funktion (){
  var f=dieses, g=Dokument, b=Fenster, m=Mathematik;
  f.btn.onmousedown=Funktion (e){
   var x=(e||b.event).clientX;
   var l=dieser.offsetLeft;
   var max=f.bar.offsetWidth-this.offsetWidth;
   g.onmousemove=Funktion (e){
    var thisX=(e||b.event).clientX;
    var to=m.min(max,m.max(-2,l+(thisX-x)));
    f.btn.style.left=bis+'px';
    f.ondrag(m.round(m.max(0,bis/max)*100),bis);
    b.getSelection ? b.getSelection().removeAllRanges() : g.selection.empty();
   };
   g.onmouseup=neue Funktion('this.οnmοusemοve=null');
  };
 },
 ondrag:Funktion (pos,x){
  dieser.Schritt.Stil.Breite=Math.max(0,x)+'px';
  dies.title.innerHTML=pos+'%';
 }
}
neue Skala ('btn', 'bar', 'title');
</Skript>
</html>

2. Erfolgseffekt

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:
  • JS implementiert das Ziehen des Fortschrittsbalkens, um die Transparenz von Elementen zu ändern
  • JavaScript implementiert den horizontalen Fortschrittsbalken-Drag-Effekt
  • js, um einen gleitenden Fortschrittsbalkeneffekt zu erzielen
  • JS implementiert kreisförmiges Ziehen und Schieben des Fortschrittsbalkens

<<:  mysql installer community 8.0.12.0 grafische anleitung zur installation

>>:  Beispielcode zur Installation von ElasticSearch und Kibana unter Docker

Artikel empfehlen

So lösen Sie das Problem, dass das Kennwort nach dem Dekomprimieren der kostenlosen MySQL-Installationsversion nicht gefunden wird

1. Entpacken Sie mysql-8.0.21-winx64 2. Konfiguri...

Einführung in die MySQL-Methode zum Löschen von Tabellendaten mit Fremdschlüsseleinschränkungen

Beim Löschen einer Tabelle oder eines Datenelemen...

Vue+Flask realisiert Videosynthesefunktion (Drag & Drop-Upload)

Inhaltsverzeichnis Wir haben in einem früheren Ar...

HTML-Tutorial: Sammlung häufig verwendeter HTML-Tags (5)

Diese eingeführten HTML-Tags entsprechen nicht un...

Detaillierte Erläuterung der Live-Übertragungsfunktion von Vue

Vor kurzem hat das Unternehmen zufällig Live-Über...

So installieren Sie FastDFS in Docker

Ziehen Sie das Bild Docker-Pull-Saison/FastDFS:1....

Ein Beispiel für die Umgestaltung eines Puzzlespiels mit vue3

Vorwort Es dauerte zwei Tage, um ein Puzzlespiel ...

Einfache Schritte zum Schreiben benutzerdefinierter Anweisungen in Vue3.0

Vorwort Vue bietet eine Fülle integrierter Anweis...

Probleme beim Springen auf HTML-Seiten und bei der Parameterübertragung

HTML-Seitensprung: Fenster.öffnen(URL, "&quo...

Zusammenfassung des MySQL-Installationsdiagramms

Grafisches Tutorial zur Installation und Konfigur...

Detaillierte Erklärung der Vue-Filter

<Text> <div id="Wurzel"> &l...

Detaillierte Erläuterung der Nginx-Strombegrenzungskonfiguration

Dieser Artikel erläutert anhand von Beispielen di...

So installieren Sie OpenSSH aus dem Quellcode in CentOS 7

Umgebung: Mindestinstallation von CentOS 7.1.1503...

Eine elegante Möglichkeit, die Autorisierungsanmeldung für WeChat-Applets zu handhaben

Vorwort Wenn das WeChat-Miniprogrammprojekt das A...

Einführung in die MySQL-Datenbank: Detaillierte Erläuterung der Konfigurationsmethode für mehrere Instanzen

Inhaltsverzeichnis 1. Was ist Multi-Instance 2. V...