JavaScript zum Erzielen eines ausgewogenen digitalen Scroll-Effekts

/**
 * Klasse, die den digitalen Scroll-Effekt implementiert*/
Klasse DigitScroll {
  Konstruktor(Optionen) {
    //DOM des Containers abrufen. Wenn nicht, wird ein Fehler ausgegeben this.container = document.querySelector(options.container);
    wenn (!dieser.container) {
      throw Error("kein Container");
    }
    this.container.style.overflow = "versteckt";
    dieser.Container.Stil.Anzeige = "flex";
    //Die Höhe des sichtbaren Containers ist gleichzeitig das Scrollintervall. Die Höhe des Containers muss festgelegt werden, andernfalls beträgt der Standardwert 30px
    this.rollHeight = parseInt(getComputedStyle(this.container).height) || 30;
    diese.Container.Stil.Höhe = diese.Rollhöhe + "px";
  }
  rollen(num) {
    // Die zum Scrollen übergebene Zahl aufteilen und den Container jeder Ziffer initialisieren this.initDigitEle(num);
    const numEles = this.container.querySelectorAll(".single-num");
    // Durchlaufe und erzeuge die Scroll-Warteschlange für jede Ziffer. Wenn der Scroll beispielsweise 7 erreicht, erzeuge 7 Divs mit den Inhalten 0, 1, 2, 3, 4, 5, 6 und 7 für die Scroll-Animation [...numEles].forEach((numEle, index) => {
      Konstante aktuelle Nummer = 0;
      sei targetNum = Zahl(diese.numberArr[index]);
      if (aktuelleNummer >= ZielNummer) {
        ZielNummer = ZielNummer + 10;
      }
      sei cirNum = curNum;
      // Dokumentfragmente zusammenfügen und gleichzeitig in den Knoten einfügen const fragment = document.createDocumentFragment();
      // Generiere Divs entsprechend der Zielzahl von 0 bis
      während (Zielnummer >= Kreisnummer) {
        const ele = document.createElement("div");
        ele.innerHTML = cirNum % 10;
        cirNum++;
        fragment.appendChild(ele);
      }
      numEle.innerHTML = "";
      AnzahlEle.AnhängenUntergeordnetesElement(Fragment);
      //Position zurücksetzen numEle.style.cssText +=
        "-webkit-transition-duration:0s;-webkit-transform:translateY(0)";
      setzeTimeout(() => {
        numEle.style.cssText += `-webkit-transition-duration:1s;-webkit-transform:translateY(${
          -(Zielnummer - aktuelleNummer) * diese.Rollhöhe
        }px);`;
      }, 50);
    });
  }
  // Initialisiere den Container initDigitEle(num) {
    //Zahlenaufteilung in Ziffern const numArr = num.toString().split("");
    // Dokumentfragmente zusammenfügen und gleichzeitig in den Knoten einfügen const fragment = document.createDocumentFragment();
    numArr.fürJeden((Artikel) => {
      const el = document.createElement("div");
      // Zahlen werden gescrollt, Nicht-Zahlen wie . werden nicht gescrollt if (/[0-9]/.test(item)) {
        el.className = "Einzelnum";
        el.style.height = this.rollHeight + "px";
        el.style.lineHeight = this.rollHeight + "px";
      } anders {
        el.innerHTML = Element;
        el.className = "keine Bewegung";
        el.style.verticalAlign = "unten";
      }
      // el.style.float='links';
      fragment.appendChild(el);
    }, []);
    dieser.container.innerHTML = "";
    dies.container.appendChild(fragment);
    //Speichern Sie die scrollenden Zahlen this.numberArr = numArr.filter((item) => /[0-9]/.test(item));
  }
}