Comment créer une horloge analogique en utilisant HTML, CSS et JavaScript ?-js tutoriel-php.cn

Comment créer une horloge analogique en utilisant HTML, CSS et JavaScript ?

PHPz

Libérer： 2023-08-29 11:01:02

avant

1034 Les gens l'ont consulté

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

Dans ce tutoriel, nous allons concevoir une horloge analogique à l'aide de HTML et CSS et la faire fonctionner en utilisant JavaScript, qui affichera l'heure actuelle au format heures, minutes et secondes.

Approche

Nous utiliserons un objet Date et avec quelques calculs nous afficherons heures , minutes et secondes .

Nous obtiendrons l'heure du système à partir d'un objet JavaScript Date() qui a des fonctions comme getHours(), getSecond() et getMinutes().

Après avoir obtenu , nous appliquerons les formats heures , minutes et secondes pour convertir la rotation des heures, minutes et secondes à trois aiguilles.

L'horloge analogique affiche l'heure à travers trois aiguilles qui bougent en continu et marquent de 1 à 12 tout en affichant l'heure.

HTML

Créez un fichier HTML nommé index.html et ajoutez du code passe-partout, c'est la syntaxe HTML de base comme indiqué ci-dessous, à l'intérieur de notre code HTML il y a un div nommé "sizeOfAnalog", entre ces trois Le div a le même nom de classe "sizeOfAnalog" avec les noms hour_clock, minutes_clock, seconds_clock.

CSS

Nous ajouterons du CSS interne ainsi que du JavaScript interne dans le code HTML. Utilisez la balise pour appliquer le CSS interne et <script></script> pour appliquer le JavaScript interne.

JavaScript

Dans la partie JavaScript, nous effectuons le travail de logique principal. Nous utiliserons l'objet JavaScript Date() et ses fonctions getHours(), getSecond() et getMinutes() pour obtenir l'heure actuelle en heures, minutes et secondes. Une fois que nous aurons le format des heures, des minutes et des secondes, nous appliquerons la rotation qui convertit les trois aiguilles des heures, des minutes et des secondes.

Étapes

Étape 1 - Nous utilisons "background: url(clock.png) no-repeat;"code pour appliquer l'image de fond de l'horloge sur l'écran, la non-répétition ici est pour empêcher le l’image de se répéter.

Étape 2 - Nous allons maintenant obtenir l'heure actuelle à l'aide de l'objet Date() et nous pouvons également obtenir l'heure, les minutes et les secondes actuelles respectivement à partir de l'objet Date. Nous allons maintenant obtenir les heures, les minutes et les secondes à partir du code HTML et convertir la rotation de l'aiguille à 360 degrés.

Étape 3 - Comme nous le savons, après 360 degrés, les degrés seront considérés comme une rotation. Donc si vous souhaitez obtenir un total de 12 heures de ces 360 degrés, vous pouvez le faire en utilisant (360/12), ce qui vous donnera 30 degrés en une heure.

Étape 4 - Idem par minute car nous avons besoin de 360 minutes au total, 60 minutes, nous pouvons donc le faire en utilisant (360/60) = 6 degrés requis par minute.

Étape 5 - Dans la partie JavaScript en utilisant setInterval() nous pouvons exécuter l'horloge réglée toutes les 1000 ms (millisecondes) puisque 1 seconde équivaut à 1000 ms.

Donc, nous utilisons new pour créer un objet date Date()

Obtenir les heures entre 0 et 23getHours()

Obtenir les minutes entre 0 et 59getMinutes()

Obtenir 0 à 59 secondes entre getSeconds()

Étape 6 - Une fois que nous avons les trois valeurs, nous ferons tourner chaque aiguille et notre horloge analogique commencera à afficher l'heure.

Exemple (programme complet)

Vous trouverez ci-dessous le code complet pour créer une horloge analogique en utilisant HTML, CSS et 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>

Copier après la connexion

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!