JavaScript zum Erzielen digitaler Uhreffekte

<Text>
    <div Klasse="Wrapper">
        <div Klasse="Spalte">
            <!-- Dieses Div stellt die Zehnerstelle dar, die 0, 1 oder 2 sein kann. -->
            <div>0</div>
            <div>1</div>
            <div>2</div>
        </div>
        <!-- Der folgende Inhalt ist zu redundant, um ihn in HTML-Code zu schreiben, daher wird er mit js geschrieben-->
        <div class="Spalte zehn"></div>
        <div Klasse="Spalte">:</div>
        <div class="Spalte sechs"></div>
        <div class="Spalte zehn"></div>
        <div Klasse="Spalte">:</div>
        <div class="Spalte sechs"></div>
        <div class="Spalte zehn"></div>
    </div>
</body>

*{
     Rand: 0;
     Polsterung: 0;
}
html,Text{
     Höhe: 100%;
     Breite: 100 %;
     Hintergrundfarbe: #0e141b;
    Überlauf: versteckt;
    /* Überlauf auf Ausblenden setzen */
}
.Verpackung{
    Textausrichtung: zentriert;
    Breite: 100 %;
}
.wrapper .spalte,
.wrapper .coln{
    Anzeige: Inline-Block;
    vertikale Ausrichtung: oben;
    Farbe: rgba(224,230,235,0,89);
    Schriftgröße: 86px;
    Zeilenhöhe: 86px;
    Schriftstärke: 300;
}
.Spalte{
    Übergang: alle 300 ms Einschwingvorgang;
}
.coln{
    /* Doppelpunktposition*/
    transformieren: übersetzenY(calc(50vh - 83px));
}
/* Nachfolgend sehen Sie die Transparenzen, die den verschiedenen Klassennamen entsprechen*/
.sichtbar{
    Deckkraft: 1;
}
.schließen{
    Deckkraft: 0,25;
}
.weit{
    Deckkraft: 0,15;
}
.Distanz{
    Deckkraft: 0,05;
}

Funktion Index(dom, verwenden) {
    //Konvertiere das übergebene DOM-Element in ein Array this.column = Array.from(dom);
    // Übertrage use auf den globalen Status, hiermit wird festgelegt, ob das anzuzeigende Zeitsystem 112 Stunden oder 24 Stunden ist. this.use = use;
    // Dieses Array ist der später festzulegende Klassenname. this.classList = ['sichtbar', 'nah', 'weit', 'Entfernung', 'Entfernung', 'Entfernung', 'Entfernung', 'Entfernung'];
    dies.createDom();
    dies.start();//Start}
// Funktion starten Index.prototype.start = function () {
    var selbst = dies;
    setzeIntervall(Funktion () {
        var c = self.getClock();
        // console.log(c);
        self.column.forEach(Funktion (Element, Index) {
            var n = + c[index];
            var Offset = n * 86; //Bewegungsdistanz console.log(Offset);
            $(ele).css({
                „Transformieren“: „translateY(calc(50vh - ' + Offset + 'px - 73px))“
                // Bewegung einstellen });
            Array.von(ele.children).fürJedes(Funktion (ele2, index2) {
                var Klassenname = self.getClass(n, index2);
                // Funktion zum Festlegen des Klassennamens aufrufen $(ele2).attr('class', className);
            })
        })
    }, 500);
};
// Verschiedene Klassennamen für Elemente mit unterschiedlichen Distanzzeiten festlegen Index.prototype.getClass = function (n, i) {
    var Klassenname = diese.Klassenliste.find(Funktion (Element, Index) {
        gibt i - Index === n zurück || i + Index === n;
    })
    Klassennamen zurückgeben || "";
}
 
// Uhrzeit abrufen und formatieren, Zeichenfolge 21:06:09 ==> 210609
Index.prototype.getClock = Funktion () {
    var d = neues Datum();
    // Hier verwenden wir einen ternären Operator. Wenn use wahr ist, erhalten wir den Wert. Wenn es falsch ist, konvertieren wir den Rest von 12 in ein 12-Stunden-System. return [this.use ? d.getHours() : d.getHours() % 12 || 12, d.getMinutes(), d.getSeconds()].reduce(function (p, n) {
        gibt p + ('0' + n).slice(-2); zurück
        // Hier addieren wir 0 zu der einzelnen Ziffer, zum Beispiel ergibt 1 plus 0 01, wenn 12 plus 0 012 ergibt, aber die letzten beiden Ziffern des Wertes ergeben 12
    }, '')
};
// Da das Schreiben aller HTML-Elemente in die HTML-Datei zu redundant ist, verwenden wir eine For-Schleife, um sie hinzuzufügen. Index.prototype.creatDom = function () {
    für (var i = 0; i < 6; i++) {
        var oDiv = '<div>' + i + '</div>';
        $(".six").anhängen(oDiv);
    }
    für (var i = 0; i < 10; i++) {
        var iDiv = '<div>' + i + '</div>';
        $(".ten").append(iDiv);
    }
};
 
// Der zweite Parameter, true ist das 24-Stunden-System, false ist das 12-Stunden-System neuer Index($('.column'), true);