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