Implementierung einer einfachen Web-Uhr mit JavaScript
|
Verwenden Sie JavaScript, um eine Webseitenuhr zu implementieren. Der Effekt ist in der folgenden Abbildung dargestellt:
Schließen Sie zunächst das Laden der Ressourcen des Zifferblatts und des Zeigers im Hauptteil ab: <div><img src="../../image/clockface.jpg" alt=""></div> <hr id="Stunde" > <hr id="min"> <hr id="Sekunde"> CSS-Stil festlegen:
<Stil>
Körper{
Rand: 0;
}
div{
Rand: 0 automatisch;
Breite: 600px;
Höhe: 600px;
}
#Stunde{
Hintergrundfarbe: schwarz;
Breite: 130px;
Höhe: 10px;
Position: fest;
oben: 295px;
links: 50%;
Rand links: -65px;
}
#min{
Hintergrundfarbe: rot;
Breite: 200px;
Höhe: 8px;
Position: fest;
oben: 296px;
links: 50%;
Rand links: -100px;
}
#zweite{
Hintergrundfarbe: gelb;
Breite: 270px;
Höhe: 5px;
Position: fest;
oben: 297,5px;
links: 50%;
Rand links: -135px;
}
</Stil>Schließlich verwendet der JS-Codeteil den Loop-Timer setInterval(), um die Hauptfunktion einmal pro Sekunde aufzurufen. In der Hauptfunktion wird new Date() verwendet, um ein Zeitobjekt zu erstellen. .getHours(); .getMinutes(); .getSeconds() werden verwendet, um die aktuellen Stunden, Minuten und Sekunden abzurufen. Dann wird die in CSS integrierte Animation-Rotation verwendet, um den Winkel des Zeigers zu ändern:
setzeInterval(Uhr,1000);
var anjleSeconds=0,anjleMin=0,anjleHours=0;
Funktion beobachten() {
var Zeit = neues Datum();
anjleSeconds=Zeit.getSeconds()/60*360+90;
anjleMin=Zeit.getMinutes()/60*360+90;
anjleStunden=jetztStunden/12*360+90;
document.getElementById("Sekunde").style.transform="rotate("+anjleSeconds+"deg)";
document.getElementById("min").style.transform="rotate("+anjleMin+"deg)";
document.getElementById("Stunde").style.transform="rotate("+anjleHours+"Grad)";
}
Das aktuelle Problem besteht darin, dass Stunden-, Minuten- und Sekundenzeiger an beiden Enden gleich lang sind, da sie durch das hr-Tag dargestellt werden. Der vollständige Code lautet wie folgt:
<!DOCTYPE html>
<html lang="de">
<Kopf>
<meta charset="UTF-8">
<title>Titel</title>
<Stil>
Körper{
Rand: 0;
}
div{
Rand: 0 automatisch;
Breite: 600px;
Höhe: 600px;
}
#Stunde{
Hintergrundfarbe: schwarz;
Breite: 130px;
Höhe: 10px;
Position: fest;
oben: 295px;
links: 50%;
Rand links: -65px;
}
#min{
Hintergrundfarbe: rot;
Breite: 200px;
Höhe: 8px;
Position: fest;
oben: 296px;
links: 50%;
Rand links: -100px;
}
#zweite{
Hintergrundfarbe: gelb;
Breite: 270px;
Höhe: 5px;
Position: fest;
oben: 297,5px;
links: 50%;
Rand links: -135px;
}
</Stil>
</Kopf>
<Text>
<div><img src="../../image/clockface.jpg" alt=""></div>
<hr id="Stunde" >
<hr id="min">
<hr id="Sekunde">
<Skript>
setzeInterval(Uhr,1000);
var anjleSeconds=0,anjleMin=0,anjleHours=0;
Funktion beobachten() {
var Zeit = neues Datum();
anjleSeconds=Zeit.getSeconds()/60*360+90;
anjleMin=Zeit.getMinutes()/60*360+90;
anjleHours=Zeit.getHours()/12*360+90;
document.getElementById("Sekunde").style.transform="rotate("+anjleSeconds+"deg)";
document.getElementById("min").style.transform="rotate("+anjleMin+"deg)";
document.getElementById("Stunde").style.transform="rotate("+anjleHours+"Grad)";
}
</Skript>
</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:
|
<<: Automatisches Erstellen und Bereitstellen mit Docker+Jenkins
>>: Die beste Erklärung zu HTTPS
Artikel empfehlen
Methode zum Erkennen, ob IP und Port verbindbar sind
Windows cmd Telnet Format: Telnet-IP-Port Fall: T...
MySQL ruft die aktuelle Datums- und Uhrzeitfunktion ab
Holen Sie sich das aktuelle Datum + die aktuelle ...
Detaillierter Prozess zur Bereitstellung von MySQL mit Docker (allgemeine Anwendungen, die mit Docker bereitgestellt werden)
Ich habe es Ihnen bereits vorgestellt: Docker (Be...
Beispielcode für reinen CSS-Beispielcode zum Erzielen eines dreidimensionalen Bildplatzierungseffekts
1. Prozentuale Basis für Elementbreite/-höhe/-pol...
Allgemeine Verwendung von regulären Ausdrücken in MySQL
Allgemeine Verwendung von Regexp in Mysql Fuzzy-M...
Tutorial zur HTML-Tabellenauszeichnung (41): Breiten- und Höhenattribute der Tabellenüberschrift WIDTH, HEIGHT
Standardmäßig werden Breite und Höhe der Kopfzeil...
Zusammenfassung der Browserkompatibilität gängiger CSS-Eigenschaften (empfohlen)
Warum müssen wir die Browserkompatibilität von CS...
Probleme mit der Rancher-Bereitstellung und dem Importieren von K8S-Clustern
Die Rancher-Bereitstellung kann über drei Archite...
Zusammenfassung von 6 Methoden zur Anzeige von Linux-Protokollen
Als Backend-Programmierer haben Sie an vielen Ste...
Konfigurieren Sie die Java-Entwicklungsumgebung in Ubuntu 20.04 LTS
Laden Sie das Java Development Kit jdk herunter D...
Nutzungs- und Best-Practice-Handbuch für die Überwachung in Vue3
Inhaltsverzeichnis Vorwort 1. API-Einführung 2. Ü...
So steuern Sie die Startreihenfolge von Docker Compose-Diensten
Zusammenfassung Docker-Compose kann problemlos me...
VUE implementiert eine Timeline-Wiedergabekomponente
In diesem Artikelbeispiel wird der spezifische Co...
Erstellen Sie eine Scala-Umgebung unter Linux und schreiben Sie ein einfaches Scala-Programm
Es ist sehr einfach, eine Scala-Umgebung in Linux...
Der Unterschied zwischen this.$router und this.$route in Vue und der push()-Methode
Im offiziellen Dokument heißt es: Durch Einfügen ...