suchen

Heim >Web-Frontend >js-Tutorial >Wie erstelle ich eine analoge Uhr mit HTML, CSS und JavaScript?

Wie erstelle ich eine analoge Uhr mit HTML, CSS und JavaScript?

PHPz
PHPznach vorne
2023-08-29 11:01:021049Durchsuche

如何使用 HTML、CSS 和 JavaScript 创建模拟时钟？

In diesem Tutorial entwerfen wir mit Hilfe von HTML und CSS eine analoge Uhr und sorgen dafür, dass sie mit JavaScript funktioniert, die die aktuelle Zeit im Stunden-, Minuten- und Sekundenformat anzeigt.

Approach

  • Wir werden ein Date-Objekt verwenden und mit einigen Berechnungen werden wir Stunden , Minuten und Sekunden anzeigen.

  • Wir erhalten die Systemzeit von einem JavaScript-Objekt Date(), das Funktionen wie getHours(), getSecond() und getMinutes() hat.

  • Nachdem wir erhalten haben, wenden wir die Formate Stunden , Minuten und Sekunden an, um die Rotation aller Dreizeigerstunden, Minuten und Sekunden umzuwandeln.

Die analoge Uhr zeigt die Zeit durch drei Zeiger an, die sich kontinuierlich bewegen und während der Zeitanzeige von 1 bis 12 markieren.

HTML

Erstellen Sie eine HTML-Datei mit dem Namen index.html und fügen Sie einen Boilerplate-Code hinzu. Dies ist die grundlegende HTML-Syntax, wie unten gezeigt. In unserem HTML-Code befindet sich ein Div mit dem Namen „sizeOfAnalog“, zwischen diesen drei. Das Div hat dasselbe Klassenname „sizeOfAnalog“ mit den Namen Stunde_Uhr, Minute_Uhr, Sekunde_Uhr.

CSS

Wir werden sowohl inneres CSS als auch inneres JavaScript in den HTML-Code einfügen. Verwenden Sie das -Tag, um internes CSS anzuwenden, und <script></script>, um internes JavaScript anzuwenden.

JavaScript

Im JavaScript-Teil erledigen wir die Hauptlogikarbeit. Wir verwenden das JavaScript-Objekt Date() und seine Funktionen getHours(), getSecond() und getMinutes(), um die aktuelle Zeit in Stunden, Minuten und Sekunden abzurufen. Sobald wir das Stunden-, Minuten- und Sekundenformat haben, wenden wir die Rotation an, die alle drei Zeiger der Stunden, Minuten und Sekunden umwandelt.

Schritte

Schritt 1 – Wir verwenden den „background: url(clock.png) no-repeat;“-Code, um das Hintergrundbild der Uhr auf dem Bildschirm anzuwenden. Das No-Repeat dient hier dazu, das zu verhindern dass sich das Bild nicht wiederholt.

Schritt 2 – Jetzt erhalten wir die aktuelle Uhrzeit mithilfe des Date()-Objekts und können auch die aktuelle Stunde, Minute und Sekunde vom Date-Objekt abrufen. Jetzt holen wir uns die Stunden, Minuten und Sekunden aus dem HTML-Code und wandeln die Drehung des Zeigers in 360 Grad um.

Schritt 3 – Wie wir wissen, werden nach 360 Grad Grad als eine Drehung betrachtet. Wenn Sie also insgesamt 12 Stunden aus diesen 360 Grad herausholen möchten, können Sie dies mit (360/12) tun, wodurch Sie 30 Grad in einer Stunde erhalten.

Schritt 4 – Dasselbe pro Minute, da wir 360 Minuten, insgesamt 60 Minuten, benötigen, also mit (360/60) = 6 Grad erforderlich pro Minute durchgeführt werden können.

Schritt 5 – Im JavaScript-Teil können wir mit setInterval() die eingestellte Uhr alle 1000 ms (Millisekunden) ausführen, da 1 Sekunde 1000 ms entspricht.

Also verwenden wir

new, um ein Datumsobjekt Date() zu erstellen.

Erhalten Sie die Stunden zwischen 0 und 23 59 Sekunden zwischen

getSeconds()

Schritt 6 – Sobald wir alle drei Werte haben, drehen wir jeden Zeiger und unsere analoge Uhr beginnt, die Zeit anzuzeigen.

Beispiel (vollständiges Programm)

Unten finden Sie den vollständigen Code zum Erstellen einer analogen Uhr mit HTML, CSS und JavaScript. 

<!DOCTYPE html>
<html>
<head>
   <title>Analog Clock Tutorials Point</title>
   <style>
      #sizeOfAnalog {
         position: relative;
         background: url(https://www.tutorialspoint.com/assets/questions/tmp/clock.png) no-repeat;
         background-size: 100%;
         margin-top: 2%;
         margin: auto;
         height: 90vh;
         width: 90vh;
      }
      #hour_clock {
         position: absolute;
         background: black;
         border-radius: 10px;
         transform-origin: bottom;
         height: 25%;
         top: 25%;
         left: 48.85%;
         opacity: 0.8;
         width: 2%;
      }
      #minute_clock {
         position: absolute;
         background: black;
         border-radius: 10px;
         transform-origin: bottom;
         left: 48.9%;
         opacity: 0.8;
         width: 1.6%;
         height: 32%;
         top: 18%;
      }
      #second_clock {
         position: absolute;
         background: black;
         border-radius: 10px;
         transform-origin: bottom;
         width: 1%;
         height: 36%;
         top: 14%;
         left: 50%;
         opacity: 0.8;
      }
   </style>
</head>
<body>
   <div id="sizeOfAnalog">
   <div id="hour_clock"></div>
   <div id="minute_clock"></div>
   <div id="second_clock"></div>
   </div>
   <script>
      var hour = document.getElementById("hour_clock");
      var minute = document.getElementById("minute_clock");
      var seconds = document.getElementById("second_clock");

      var addClock = setInterval(function clock() {
         var date_now = new Date();
         var hr = date_now.getHours();
         var min = date_now.getMinutes();
         var sec = date_now.getSeconds();

         var calc_hr = hr * 30 + min / 2;
         var calc_min = min * 6;
         var calc_sec = sec * 6;

         hour.style.transform = "rotate(" + calc_hr + "deg)";
         minute.style.transform = "rotate(" + calc_min + "deg)";
         seconds.style.transform = "rotate(" + calc_sec + "deg)";
      }, 1000);
   </script>
</body>
</html>

Das obige ist der detaillierte Inhalt vonWie erstelle ich eine analoge Uhr mit HTML, CSS und JavaScript?. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!

JavaScript css html date 指针 对象 background
Stellungnahme：
Dieser Artikel ist reproduziert unter:tutorialspoint.com. Bei Verstößen wenden Sie sich bitte an admin@php.cn löschen
Vorheriger Artikel：Warum verwenden wir JavaScript in HTML?Nächster Artikel：Warum verwenden wir JavaScript in HTML?

In Verbindung stehende Artikel

Mehr sehen