Natives JS zum Erzielen digitaler Tisch-Spezialeffekte

Dieser Artikel beschreibt einen Digitaluhreffekt, der mit nativem JS implementiert wurde. Der Effekt ist wie folgt:

Die obigen Zahlen werden mithilfe der folgenden 10 Bilder generiert:

Der Implementierungscode lautet wie folgt. Sie können ihn gerne kopieren und einfügen.

<!DOCTYPE html>
<html>
 
<Kopf>
    <meta http-equiv="Inhaltstyp" content="text/html; charset=utf-8" />
    <title>Natives JS zum Erzielen digitaler Tisch-Spezialeffekte</title>
    <Stil>
        Körper {
            Hintergrund: blau;
            Farbe: weiß;
            Schriftgröße: 30px;
        }
 
        #div1 {
            Breite: 220px;
            Höhe: 36px;
            Position: fest;
            links: 50%;
            oben: 50 %;
            transformieren: übersetzen(-50 %, -50 %);
            Rand: 1px #FFF durchgezogen;
        }
 
        #div1 img {
            Breite: 25px;
            Höhe: 36px;
            Position: relativ;
        }
    </Stil>
    <Skript>
        fenster.onload = Funktion () {
            //Alle Bilder abrufen var aImg = document.getElementsByTagName('img');
            //Holen Sie sich das lokale Zeitobjekt var oDate = new Date();
            //Stunden + Minuten + Sekunden var prevStr = toZero(oDate.getHours()) +
                toZero(oDate.getMinutes()) +
                toZero(oDate.getSeconds());
            //Deklariere die String-Variable für das nächste Mal var nextStr = '';
            //Die Anzahl der Sekunden, die sich gleichzeitig ändern, kann mehrere Ziffern umfassen. Erstellen Sie daher ein Array, um sie zu speichern. var arr = [];
            var Timer = null;
 
            //Die Quelladresse des i-ten img-Bildes ist der Bildname, der der i-ten Ziffer der aktuellen Zeit unter img entspricht //104604=>Holen Sie sich die Zeichen von 1 bis 6 jeweils über charAt (i), d. h. 1, 0, 4, 6, 0, 4
            für (var i = 0; i < aImg.length; i++) {
                aImg[i].src = 'Bilder/' + prevStr.charAt(i) + '.png';
            };
 
            //Stellen Sie den Timer so ein, dass die Methode toChange alle 1 Sekunde ausgeführt wird. setInterval(toChange, 1000);
 
            //Holen Sie sich das nächste Mal function toChange() {
                //Lokale Zeit abrufen Objekt var oDate = new Date();
                //Stunden + Minuten + Sekunden nextStr = toZero(oDate.getHours()) +
                    toZero(oDate.getMinutes()) +
                    toZero(oDate.getSeconds());
                //Vergleiche die vorherige Zeit mit der nächsten Zeit toCom(prevStr, nextStr);
                //Die nächste Sekunde der aktuellen Zeit zuweisen und weiter ändern prevStr = nextStr;
            };
            //Vergleiche das letzte Mal mit dem nächsten Mal function toCom(str1, str2) {
                // Vor dem Vergleich den vorherigen Wert löschen und arr = [] neu zuweisen.
                //Durchlaufe jede Ziffer zum ersten Mal for (var i = 0; i < str1.length; i++) {
                    //Wenn sich ein Zeichen von dem entsprechenden Zeichen beim nächsten Mal unterscheidet if (str1.charAt(i) != str2.charAt(i)) {
                        //In das Array schieben arr.push(i);
                    }
                }
                //Bildumkehr ausführen startMove();
 
            };
            //Bildumkehrfunktion function startMove() {
                //Bildhöhe 36px, zweite Verkleinerung auf -4px setzen
                var iSpeed = -4;
 
                //Stelle den Timer ein timer = setInterval(function () {
                    //Durchlaufe alle Strings im Array, deren letzte und nächste Zeit sich für (var i = 0; i < arr.length; i++) { geändert haben.
                        //Wenn die Bildhöhe des Namens, der den verschiedenen Zeichen im Array entspricht, gleich 0 ist
                        wenn (aImg[arr[i]].offsetHeight == 0) {
                            //Stellen Sie die Änderungsgeschwindigkeit auf eine Erhöhung um 4px ein
                            iGeschwindigkeit = 4;
                            //Die Bildposition, die dem Namen verschiedener Zeichen entspricht, ist gleich dem Bildnamen, der der i-ten Ziffer der nächsten Zeit in img entspricht //i stellt die Ziffer dar, an der sich die beiden Zeitänderungen befinden, arr[i] erhält die spezifische Nummer aImg[arr[i]].src = 'images/' + nextStr.charAt(arr[i]) + '.png';
                        }
                        //Die Höhe des Bildes, das dem Namen der verschiedenen Zeichen im Array entspricht, entspricht jedes Mal seiner Inhaltshöhe minus 4px
                        //Beachte die Höhe von style.height und offsetHeight aImg[arr[i]].style.height = aImg[arr[i]].offsetHeight + iSpeed + 'px';
                        //Der obere Wert des Bildes, der dem Namen der verschiedenen Zeichen im Array entspricht, entspricht der Hälfte seiner Inhaltshöhe minus 18 Pixel.
                        //Damit bei jedem Bildwechsel dieses in der Mitte angezeigt werden kann aImg[arr[i]].style.top = aImg[arr[i]].offsetHeight / 2 - 18 + 'px';
 
                        //Wenn die Bildhöhe die maximale Höhe von 36pxif erreicht (aImg[arr[i]].offsetHeight == 36) {
                            //Timer löschen clearInterval(timer);
                        }
                    }
 
                }, 10);
            };
 
 
            //Holen Sie sich die Ortszeit. Wenn die Einerstelle kleiner als 10 und die Zehnerstelle 0 ist, gibt es so etwas nicht. Hier ist die gekapselte Funktion toZero(num) {
                wenn (Zahl < 10) {
                    gibt '0' + Num zurück;
                } anders {
                    Rückgabewert '' + Num;
                }
            }
        };
    </Skript>
</Kopf>
 
<Text>
    <div id="div1">
        <img src="bilder/0.png" />
        <img src="images/0.png" />:
        <img src="bilder/0.png" />
        <img src="images/0.png" />:
        <img src="bilder/0.png" />
        <img src="bilder/0.png" />
    </div>
</body>
 
</html>

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: