Native JS-Implementierung der Slider-Intervallkomponente

In diesem Artikelbeispiel wird der spezifische Code von js zur Implementierung der Slider-Intervallkomponente zu Ihrer Information geteilt. Der spezifische Inhalt ist wie folgt

Funktionale Anforderungen:

1. Der Minimalwert ist 0 und der Intervallbereich wird entsprechend dem angegebenen Maximalwert generiert.
2. Wenn Sie den Schieberegler ziehen, wird der entsprechende Bereich angezeigt und der Schieberegler zeigt den entsprechenden Status an.
3. Beim Klicken bewegt sich der nächstgelegene Schieberegler an die Position, auf die mit der Maus geklickt wird.

Standardeffekt:

Wenn Sie den Schieberegler ziehen, sieht die Anzeige wie folgt aus:

analysieren:

Zunächst muss das Layout geschrieben werden. Insgesamt gibt es vier Elemente, zwei Slider und zwei Sliderbars. Beim Layout müssen Sie die spätere Überwachung der Schieberegler- und Schiebeleistenereignisse berücksichtigen und das Aufsteigen der Ereignisse minimieren.
Unterscheiden Sie beim Ziehen eines Schiebereglers, ob es sich um den linken oder den rechten Schieberegler handelt.
Das Click-Event und Mousedown-Event der Maus sollten kompatibel sein. Das Mousedown-Event wird hier einheitlich verwendet.
Bestimmen Sie die maximalen und minimalen linken Werte der linken und rechten Schieberegler.
Die Anzeige des Schiebereglers ist sehr einfach. Die Breite ist der Positionierungsunterschied zwischen dem linken und rechten Schieberegler, und der linke Wert ist der linke Wert des linken Schiebereglers.
Da der Ereignisdelegierungsmechanismus verwendet wird und es bei den Ereignissen mousemove und mouseup nicht möglich ist, zu bestimmen, welcher Schieberegler aktuell bedient wird, wird beim Drücken der Maus das aktuell bediente Objekt an das Ereignis mousemove übergeben.

Der Code ist unten angehängt:

HTML-Struktur, Instanziieren des Schiebereglers und Festlegen des Bereichs des aktuellen Schiebereglers:

<!DOCTYPE html>
<html lang="de">
<Kopf>
 <meta charset="UTF-8">
 <meta name="viewport" content="width=Gerätebreite, Anfangsmaßstab=1.0">
 <title>Folie</title>
</Kopf>
<Text>
 <Skripttyp="Modul">
 importiere Folie aus "./js/Slide.js";

 init();
 Funktion init(){
  //Der Parameter ist der maximale Bereich. Wenn nicht übergeben, ist der Standardwert 4000
  let Folie = neue Folie(4200);
  Folie.AnhängenTo("body");
 }

 </Skript>
</body>
</html>

Datei Slide.js: vervollständigt die Funktionen zum Erstellen eines Schiebereglers, Ziehen eines Schiebereglers und Klicken auf einen Schieberegler.

importiere Utils aus "./Utils.js";
Standardklasse „Slide“ exportieren{
 statischer styleCss=false;
 //Minimaler Bereich minNum=0;
 //Maximaler Bereich maxNum;
 //Der linke Wert der linken Taste leftBtnLeft=0;
 //Der linke Wert der rechten Taste rightBtnLeft=238;
 Konstruktor(_max=4000){
 //Der Standardmaximalwert beträgt 4000
 dies.maxNum=_max;
 dies.elem = dies.createElem();
 }
 Element erstellen(){
 wenn(dieses.elem) dieses.elem zurückgeben;
 //Erstellen Sie den äußersten Container let div=Utils.createE("div");
 div.className="Foliencontainer";
 div.innerHTML=`<p class="priceTxt">Preis<span id="rangeText">￥${this.minNum}-${this.maxNum}</span></p>
 <div Klasse="Bereichscontainer" id="Bereichscontainer">
  <div Klasse="bgRange" id="bgRange"></div>
  <div Klasse="Preisbereich" id="Preisbereich"></div>
  <span id="leftBtn" class="leftBtn"></span>
  <span id="rightBtn" class="rightBtn"></span>
 </div>`;
 Utils.getIdElem(div,dies);
 //Stil festlegen Slide.setStyles();
 //Auf das Mousedown-Ereignis für das übergeordnete Element warten this.rangeContainer.addEventListener("mousedown",e=>this.mouseHandler(e))
 div zurückgeben;
 }
 anhängenAn(übergeordnet){
 Utils.appendTo(dieses.Element,übergeordnet);
 }
 Maushandler(e){
 //Hinweis: Im von getBoundingClientRect() zurückgegebenen Ergebnis enthalten Breite und Höhe beide einen Rahmen. let rect=this.rangeContainer.getBoundingClientRect();
 Schalter (e.Typ) {
  Fall „mousedown“:
  //Das Standardereignis des schnellen Ziehens mit der Maus abbrechen e.preventDefault();
  dies.x = e.offsetX;
  dies.btnType=e.ziel.id;
  //Wenn auf die Hintergrundleiste geklickt wird, führe die rangeClick-Funktion aus, if(/Range/.test(this.btnType)){
   e.stopPropagation();
   //Klickfunktion this.rangeClick(e);
   zurückkehren;
  }
  //Wenn auf die Schaltfläche geklickt wird, auf Ereignisse in der Dokumentmausbewegung achten this.mouseHandlers=e=>this.mouseHandler(e);
  document.addEventListener("Mausbewegung", this.mouseHandlers);
  document.addEventListener("mouseup", this.mouseHandlers);
  brechen;
  Fall "Mausbewegung":
  lass x = e.clientX - rect.x - this.x;
  //Den linken Wert der linken und rechten Schaltflächen abrufen this.leftBtnLeft=parseInt(getComputedStyle(this.leftBtn).left);
  dies.rightBtnLeft=parseInt(getComputedStyle(this.rightBtn).left);
  wenn (dieser.btnType === "leftBtn") {
   //Wertebereich der linken Taste bestimmen if (x < 0) x = 0;
   wenn (x > dies.rightBtnLeft) x = dies.rightBtnLeft;
   dies.leftBtn.style.left = x + "px";
  } sonst wenn (dieser.btnType === "rightBtn") {
   //Bestimmen Sie den Wertebereich der rechten Schaltfläche abzüglich des 1px-Rands, wenn (x < this.leftBtnLeft) x = this.leftBtnLeft;
   wenn (x > this.bgRange.offsetWidth - 2) x = this.bgRange.offsetWidth - 2;
   dies.rightBtn.style.left = x + "px";
  }
  //Textbereich anzeigen this.changeRangeText();
  brechen;
  Fall "mouseup":
  //Ereignis-Listener verschieben document.removeEventListener("mousemove", this.mouseHandlers);
  document.removeEventListener("mouseup", this.mouseHandlers);
  brechen;
 }
 }
 rangeClick(e){
 //Berechnen Sie den Wert der Mausklickposition let click_X=e.clientX-this.rangeContainer.getBoundingClientRect().x-this.leftBtn.offsetWidth/2;
 //Beurteilen Sie, ob sich die aktuelle Klickposition auf der linken Seite der linken Taste befindet oder ob sich die linke und die rechte Taste überlappen und sich die Klickposition auf der linken Seite der Taste befindet. Bewegen Sie die linke Taste an die Position, an der mit der Maus geklickt wird. if (Math.abs (click_X-this.leftBtnLeft) <Math.abs (click_X-this.rightBtnLeft) || 
 (diese.leftBtnLeft===diese.rightBtnLeft && Klick_X<diese.leftBtnLeft)) dies.leftBtn.style.left=Klick_X+"px";
 //Andernfalls bewegen Sie die rechte Taste an die Position, an der die Maus geklickt wurde, sonst this.rightBtn.style.left=click_X+"px";
 //Nach dem Verschieben den linken Wert der linken und rechten Schaltflächen abrufen this.leftBtnLeft=parseInt(getComputedStyle(this.leftBtn).left);
 dies.rightBtnLeft=parseInt(getComputedStyle(this.rightBtn).left);
 //Textbereich anzeigen this.changeRangeText();
 }
 Bereichstext ändern(){
 //Mindest- und Maximalbereichswerte berechnen und runden let minTxt=Math.round(this.leftBtnLeft/(this.bgRange.clientWidth-2)*this.maxNum);
 let maxTxt=Math.round(this.rightBtnLeft/(this.bgRange.clientWidth-2)*this.maxNum);
 this.rangeText.innerText=`￥${minTxt}-${maxTxt}`;
 //Ändern Sie die Farbe des Schiebereglers this.changeRangeSlide();
 }
 Bereichsschieber ändern(){
 //Die Breite des Schiebereglers entspricht dem Abstand zwischen der linken und rechten Schaltfläche this.priceRange.style.width=this.rightBtnLeft-this.leftBtnLeft+"px";
 //Der linke Wert des Schiebereglers entspricht dem linken Wert der linken Schaltfläche this.priceRange.style.left=this.leftBtnLeft+"px";
 }
 statische setStyles(){
 wenn(Slide.styleCss) return;
 Folie.styleCss=true;
 Utils.insertCss(".slideContainer",{
  Breite: "260px",
  Höhe: "70px",
  Rand: „50px“
 })
 Utils.insertCss(".priceTxt",{
  Schriftgröße: "14px",
  Farbe:"#666",
  Rand unten: „20px“
 })
 Utils.insertCss(".priceTxt span",{
  float:"rechts"
 })
 Utils.insertCss(".rangeContainer",{
  Breite: "260px",
  Höhe: "20px",
  Position: „relativ“,
 })
 Utils.insertCss(".bgRange",{
  Breite: "240px",
  Höhe: "3px",
  Hintergrundfarbe: "#dedede",
  Position: „absolut“,
  links:"10px",
  oben: "9px"
 })
 Utils.insertCss(".priceRange",{
  Breite: "240px",
  Höhe: "3px",
  Hintergrund:"#ffa800",
  Position: „absolut“,
  links:"10px",
  oben: "9px"
 })
 Utils.insertCss(".rangeContainer span",{
  Breite: "20px",
  Höhe: "20px",
  borderRadius:"50%",
  Rahmen: „1px durchgezogen #ccc“,
  Hintergrund:"#fff",
  Position: „absolut“,
  oben: "0px",
  boxShadow:"2px 2px 2px #333"
 })
 Utils.insertCss(".leftBtn",{
  links:"0px"
 })
 Utils.insertCss(".rightBtn",{
  links:"238px"
 })
 }
}

Utils.js-Datei: ist eine Tool-Paketdatei.

exportiere Standardklasse Utils{
 statisch erstellenE(Element,Stil,Vorbereitung){
 elem = Dokument.Element erstellen(elem);
 wenn (Stil) für (let prop in Stil) elem.style[prop]=style[prop];
 wenn (Vorbereitung) für (let prop in prep) elem[prop]=prep[prop];
 Rücklaufelement;
 }
 statisches Anhängen an (Element, übergeordnetes Element) {
 wenn (übergeordneter.Konstruktor === String) übergeordnetes Element = document.querySelector(übergeordnetes Element);
 übergeordnetes Element.AnhängenKind(Element);
 }
 statische Zufallszahl(min,max){
 gibt Math.floor(Math.random*(max-min)+min) zurück;
 }
 statische Zufallsfarbe (Alpha) {
 alpha=alpha||Math.random().toFixed(1);
 wenn(isNaN(alpha)) alpha=1;
 wenn (Alpha>1) Alpha = 1;
 wenn (alpha<0) alpha=0;
 Lassen Sie col="rgba(";
 für (lass i = 0; i < 3; i++) {
  col+=Utils.randomNum(0,256)+",";
 }
 col+=alpha+")";
 Rückspalte;
 }
 statisches insertCss(Auswählen,Stile){
 wenn(document.styleSheets.length===0){
  let styleS = Utils.createE("Stil");
  Utils.appendTo(styleS,document.head);
 }
 let styleSheet = Dokument.styleSheets[Dokument.styleSheets.Länge-1];
 Lassen Sie str = auswählen + "{";
 für (var prop in Stilen) {
  str+=prop.replace(/[AZ]/g,function(item){
  return "-"+item.toLocaleLowerCase();
  })+":"+Stile[Eigenschaft]+";";
 }
 str+="}"
 styleSheet.insertRule(str,styleSheet.cssRules.length);
 }
 statisch getIdElem(elem,obj){
 wenn(elem.id) obj[elem.id]=elem;
 wenn (elem.children.length===0) returniere obj;
 für (lass i = 0; i < Element. Kinder. Länge; i ++) {
  Utils.getIdElem(elem.children[i],obj);
 }
 }
}

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:

Vue implementiert die Drag-Slider-Verifizierungsfunktion (nur CSS+JS ohne Hintergrundverifizierungsschritte)
Implementierung der Drag-Slider-Verifizierungsfunktion basierend auf JS-Komponenten (Code-Sharing)
Implementierung des Drag-Slider-Effekts basierend auf JavaScript
Javascript implementiert den Implementierungscode zum Verschieben des Schiebereglers, um den Wert zu ändern
js realisiert den digitalen Slider-Drag-Selection-Effekt, der mit PCs und mobilen Endgeräten kompatibel ist
JS reagiert auf Mausklicks, um den Drag-Effekt zwischen zwei Schiebereglern zu erzielen
js-Methode zur Steuerung der Bildgröße durch Ziehen des Schiebereglers
Realisierung eines Tab-Slider-Effekts basierend auf Vue.js
Javascript: Wenn die Maus nach oben bewegt wird, folgt der kleine Dreiecksschieber langsam dem Effekt
JS implementiert den Slider-Bewegungseffekt in Webspielen als Reaktion auf Mausklicks

<<: Vollständige Schritte zur Installation von mysql5.7 auf dem Mac (mit Bildern und Text)

>>: Detaillierte Erklärung der wunderbaren Verwendung von SUID, SGID und SBIT in Linux

Detaillierte Erläuterung der MySQL Master-Slave-Replikation und der Lese-/Schreibtrennung

Native JS-Implementierung der Slider-Intervallkomponente

Funktionale Anforderungen:

Standardeffekt:

analysieren:

Detaillierte Erläuterung der MySQL Master-Slave-Replikation und der Lese-/Schreibtrennung

Zusammenfassung häufig verwendeter SQL-Operationen in MySQL-Tabellen

So starten Sie ein Vue.js-Projekt

Detaillierte Erklärung der Verwendung von Vorlagen-Tags (einschließlich Zusammenfassung der Verwendung in Vue)

Canonical ermöglicht Linux-Desktop-Apps mit Flutter (empfohlen)

Installations-Tutorial für virtuelle VMware-Maschinen unter Ubuntu 18.04

Vue+echarts realisiert Fortschrittsbalken-Histogramm

MySQL Serie 12 Backup und Wiederherstellung

MySQL-Lernzusammenfassung: Ein vorläufiges Verständnis des Architekturdesigns der InnoDB-Speicher-Engine

Inhaltstypbeschreibung, d. h. der Typ des HTTP-Anforderungsheaders

Artikel empfehlen

Python schreibt die Ausgabe in den CSV-Vorgang

MySQL-Datenbankgrundlagen - Prinzip der Join-Operation

Idee in einem War-Paket verpackt, auf Tomcat bereitgestellt und Probleme mit dem Zugriffspfad (Abbildung und Text)

Lösung für das Problem, dass nach einem Neustart von Ubuntu in VMWare kein Zugriff auf das Internet möglich ist

Praktisches MySQL + PostgreSQL Batch-Insert-Update insertOrUpdate

Einführung in die Unterschiede zwischen HTML-Name, ID, Klasse (Format/Anwendungsszenario/Funktionen) usw.

Detaillierte Erklärung zur Verwendung des Basis-Tags in HTML

Zusammenfassung häufig verwendeter Zeit-, Datums- und Konvertierungsfunktionen in MySQL

Node+Express zum Erzielen eines Paging-Effekts

Neue Features in MySQL 8: Unsichtbare Indizes

Verwenden Sie die vertikale Ausrichtung, um Eingabe und Bild auszurichten

Docker verwendet den Befehl mysqldump, um MySQL-Daten im Projekt zu sichern und zu exportieren

Lösung für Ubuntu 18.04, das keine Verbindung zum Netzwerk in der virtuellen VMware-Maschine herstellen kann

Fünf Möglichkeiten zum automatischen Seitensprung in HTML

Der HTML 5-Entwurf wurde kein formeller Standard