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
![Analyse allgemeiner Grundvorgänge der MySQL-Datenbank [Datenbank erstellen, anzeigen, ändern und löschen]](/upload/images/67cad65c75842.webp)
Artikel empfehlen
Grafisches Tutorial zur Konfigurationsmethode für die kostenlose Installationsversion von MySQL 5.7.17 (Windows 10)
1. Übersicht Ich habe viel online gesucht und fes...
So übermitteln Sie eine reine HTML-Seite, übergeben Parameter und überprüfen die Identität
Da das Projekt einen Fragebogen erfordert, der Kun...
Detaillierter Prozess und häufige Probleme bei der VMware15-Installation von CentOS7 (Bild und Text)
1. Vorbereitung des Installationspakets VMware-pl...
CSS3-Implementierungsbeispiel zum Drehen nur des Hintergrundbildes um 180 Grad
1. Mentale Reise Als ich kürzlich das Cockpit sch...
Datenbankabfrage, welches Objekt welches Feld enthält, Methodenanweisung
Die Datenbank fragt ab, welches Objekt welche Fel...
Beschreiben Sie kurz die Verwendung und Beschreibung des MySQL-Primärschlüssels und des Fremdschlüssels
Inhaltsverzeichnis 1. Fremdschlüsseleinschränkung...
So verwenden Sie Maxwell zum Synchronisieren von MySQL-Daten in Echtzeit
Inhaltsverzeichnis Über Maxwell Konfiguration und...
Grafisches Tutorial zum Herunterladen und Installieren von MySQL 5.7 und höher
1. Herunterladen 1. Download-Adresse der offiziel...
Zusammenfassung der Verwendung von MySQL Online DDL gh-ost
Hintergrund: Als DBA werden die meisten DDL-Änder...
Der Unterschied sowie die Vor- und Nachteile des MySQL-Primärschlüssels UUID und des automatisch inkrementierten Primärschlüssels
Einführung Ich habe eine Zeit lang die PostgreSQL...
Installieren Sie Ethereum/Ethereum von Grund auf unter CentOS7
Inhaltsverzeichnis Vorwort Fügen Sie Sudo-Schreib...
Teilen Sie die von Webdesign-Meistern häufig verwendeten responsiven Frameworks (Zusammenfassung)
Dieser Artikel stellt die von Webdesign-Meistern ...
mysql 8.0.19 winx64.zip Installations-Tutorial
Dieser Artikel zeichnet das Installationstutorial...
Informationen zum Ausdruck „wenn Komma enthält“ in JavaScript
Manchmal sehen Sie in der if-Anweisung in JavaScr...
Tutorial zur Installation von MySQL unter CentOS7
Vor kurzem habe ich vor, eine Cloud-Festplatte au...