Hallo, liebe Entwickler! Heute freue ich mich, Ihnen ein Projekt vorzustellen, das ich kürzlich fertiggestellt habe: eine Analoguhr. Dieses Projekt ist eine optisch ansprechende und interaktive Möglichkeit, die Zeit mithilfe eines herkömmlichen analogen Zifferblatts anzuzeigen. Es ist ein hervorragendes Projekt zum Verfeinern Ihrer JavaScript-, CSS- und HTML-Kenntnisse, insbesondere im Umgang mit Animationen, DOM-Manipulation und zeitbasierten Funktionen. Egal, ob Sie ein Anfänger sind, der üben möchte, oder ein erfahrener Entwickler, der eine klassische Uhrenschnittstelle erstellen möchte, dieses Projekt ist eine gute Wahl.
Die Analoguhr ist eine Echtzeituhr, die das Aussehen und die Funktionalität einer herkömmlichen Analoguhr nachahmt. Die Uhr aktualisiert sich jede Sekunde dynamisch, wobei sich die Stunden-, Minuten- und Sekundenzeiger gleichmäßig drehen, um die aktuelle Uhrzeit anzuzeigen. Dieses Projekt ist ideal für Entwickler, die das Erstellen dynamischer und optisch ansprechender Webanwendungen üben möchten.
Hier ein kurzer Blick auf die Projektstruktur:
Analog-Clock/ ├── index.html ├── style.css └── script.js
Um mit dem Projekt zu beginnen, befolgen Sie diese Schritte:
Klonen Sie das Repository:
git clone https://github.com/abhishekgurjar-in/Analog-Clock.git
Öffnen Sie das Projektverzeichnis:
cd Analog-Clock
Führen Sie das Projekt aus:
Die Datei index.html richtet die Struktur der Webseite ein, einschließlich des Uhrencontainers und des Headers. Unten finden Sie einen Ausschnitt des HTML-Codes:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Analog Clock</title>
<link rel="stylesheet" href="style.css" />
<script src="script.js" defer></script>
</head>
<body>
<div class="header">
<h1>Analog Clock</h1>
</div>
<div id="clockContainer">
<div id="hour"></div>
<div id="minute"></div>
<div id="second"></div>
</div>
<div class="footer">
<p>Made with ❤️ by Abhishek Gurjar</p>
</div>
</body>
</html>
Die style.css-Datei formatiert den Behälter und die Zeiger der Uhr und stellt sicher, dass sie sich richtig drehen, um die Uhrzeit anzuzeigen. Zu den wichtigsten Stilen gehören:
#clockContainer {
position: relative;
margin: auto;
height: 30vw;
width: 30vw;
background: url(clock.png) no-repeat;
background-size: 100%;
}
#hour,
#minute,
#second {
position: absolute;
background: black;
border-radius: 10px;
transform-origin: bottom;
}
#hour {
width: 1.8%;
height: 25%;
top: 25%;
left: 48.85%;
opacity: 0.8;
}
#minute {
width: 1.6%;
height: 30%;
top: 19%;
left: 48.9%;
opacity: 0.8;
}
#second {
width: 1%;
height: 40%;
top: 9%;
left: 49.25%;
opacity: 0.8;
}
.header {
margin: 80px;
text-align: center;
}
.footer {
margin: 50px;
text-align: center;
}
Die Datei script.js übernimmt die Berechnung der aktuellen Uhrzeit und aktualisiert die Drehung der Uhrzeiger entsprechend. Unten ist ein Ausschnitt des JavaScript-Codes:
setInterval(() => {
const date = new Date();
const hourTime = date.getHours();
const minuteTime = date.getMinutes();
const secondTime = date.getSeconds();
const hourRotation = 30 * hourTime + minuteTime / 2;
const minuteRotation = 6 * minuteTime;
const secondRotation = 6 * secondTime;
const hour = document.getElementById('hour');
const minute = document.getElementById('minute');
const second = document.getElementById('second');
hour.style.transform = `rotate(${hourRotation}deg)`;
minute.style.transform = `rotate(${minuteRotation}deg)`;
second.style.transform = `rotate(${secondRotation}deg)`;
}, 1000);
Hier können Sie sich die Live-Demo der Analoguhr ansehen.
Der Bau dieser Analoguhr war eine lohnende Erfahrung, die es mir ermöglichte, tiefer in JavaScript-Animationen und DOM-Manipulation einzutauchen. Ich hoffe, dass dieses Projekt Sie dazu inspiriert, Ihre eigenen interaktiven und optisch ansprechenden Anwendungen zu erstellen. Erkunden Sie den Code, passen Sie ihn an und verwenden Sie ihn in Ihren eigenen Projekten. Viel Spaß beim Codieren!
Dieses Projekt wurde vom klassischen Design analoger Uhren und dem Bedarf an einem einfachen Tool zur Echtzeit-Zeitanzeige inspiriert.
Das obige ist der detaillierte Inhalt vonErstellen Sie eine Website für analoge Uhren. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!
Der Unterschied zwischen Pascal-Sprache und C-Sprache
bootmgr fehlt und kann nicht booten
Konvertierung der Unicode-Kodierung
Detaillierte Erläuterung der Verwendung der Oracle-Substr-Funktion
Anwendung künstlicher Intelligenz im Leben
Der Unterschied zwischen Ankern und Zielen
ibatis
Einführung in Artikel-Tag-Attribute
![[Web-Frontend] Node.js-Schnellstart](https://img.php.cn/upload/course/000/000/067/662b5d34ba7c0227.png)
