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:
|
<<: Auszeichnungssprache - CSS-Layout
>>: Analyse des Prozesses zum Bereitstellen von Python-Anwendungen in Docker-Containern
Artikel empfehlen
CSS zum Erzielen eines Popup-Fensters oben und unten, links und rechts in der Mitte und eines transparenten Hintergrund-Sperrfenstereffekts
Es gibt eine einfache CSS-Methode, um das Popup-F...
Zusammenfassung einiger Grundsätze, die bei der Ausgabe von HTML-Seiten beachtet werden sollten
1. DOCTYPE ist unverzichtbar. Der Browser bestimm...
Zusammenfassung der praktischen Methoden von CSS3 (empfohlen)
1. Abgerundeter Rand: CSS- CodeInhalt in die Zwis...
Grafische Erläuterung der Lösungen zur Frontend-Verarbeitung kleiner Symbole
Vorwort Bevor wir mit diesem Artikel beginnen, be...
Ausführliche Erläuterung versteckter Felder, einer neuen Funktion von MySQL 8.0
Vorwort MySQL Version 8.0.23 fügt eine neue Funkt...
So gehen Sie mit dem vom Linux-System gemeldeten Warnproblem xfs_vm_releasepage um
Problembeschreibung Auf mehreren Rechnern wurden ...
So lösen Sie das Problem unzureichender Berechtigungen beim Benutzerwechsel im Docker-Container
Beim Benutzerwechsel im Docker-Container kommt di...
Verwenden Sie thead, tfoot und tbody, um eine Tabelle zu erstellen
Manche Leute verwenden diese drei Tags auf pervers...
Eine kurze Diskussion über die richtige Haltung der Tomcat-Speicherkonfiguration
1. Hintergrund Obwohl ich viele Blogs und Artikel...
So erstellen Sie mit Harbor ein privates Docker-Repository
Inhaltsverzeichnis 1. Open-Source-Lagerverwaltung...
Lösung für großen Zeilenabstand (5 Pixel mehr im IE)
Code kopieren Der Code lautet wie folgt: li {Brei...
So gehen Sie mit verstümmelten Zeichen in der MySQL-Datenbank um
In MySQL können in der Datenbank fehlerhafte Zeic...
HTML+CSS+jQuery imitiert den Such-Hotlist-Tab-Effekt mit Screenshots
Code kopieren Der Code lautet wie folgt: <!DOC...
Docker stellt MySQL bereit, um Beispielcode für eine Remoteverbindung zu erreichen
1. Docker durchsucht MySQL查看mysql版本 2. Docker Pul...
Neue Funktionen von JS ES: Einführung in Erweiterungsoperatoren
1. Spread-Operator Der Spread-Operator besteht au...