Développer une application d'horloge Web basée sur JavaScript

Développer une application d'horloge Web basée sur JavaScript

Avec le développement rapide d'Internet, les applications Web sont devenues un élément indispensable de nos vies. La mise en œuvre de diverses fonctions intéressantes est devenue l'une des tâches importantes du développement Web. Dans cet article, nous présenterons comment développer une application d'horloge Web simple basée sur JavaScript.

1. Structure HTML

Tout d'abord, construisons la structure HTML. Nous avons besoin d'un conteneur d'horloge et d'étiquettes pour afficher les heures, les minutes et les secondes. Le code est le suivant :

  :  :  

2. Styles CSS

Ensuite, nous devons ajouter quelques styles au conteneur et à l'étiquette de l'horloge. Vous pouvez ajuster le style à votre guise. Le code est le suivant :

#clock { font-size: 48px; font-weight: bold; text-align: center; margin-top: 100px; } #hours, #minutes, #seconds { padding: 0 10px; }

3. Code JavaScript

Maintenant, nous allons implémenter la fonction horloge via JavaScript. Nous devons obtenir l'heure actuelle et l'afficher dans l'étiquette correspondante. Le code est le suivant :

function updateClock() { var now = new Date(); var hours = now.getHours(); var minutes = now.getMinutes(); var seconds = now.getSeconds(); document.getElementById("hours").innerHTML = formatTime(hours); document.getElementById("minutes").innerHTML = formatTime(minutes); document.getElementById("seconds").innerHTML = formatTime(seconds); } function formatTime(time) { return time < 10 ? "0" + time : time; } setInterval(updateClock, 1000);

Dans ce code, nous créons d'abord une fonction appeléeupdateClockpour mettre à jour l'horloge.new Date()est utilisé dans la fonction pour obtenir l'heure actuelle, et les heures, minutes et secondes sont stockées dans les variables correspondantes.updateClock的函数，用于更新时钟。函数内部使用了new Date()来获取当前时间，并将小时、分钟和秒钟分别保存在对应的变量中。

然后，我们通过document.getElementById来获取对应的标签，并将相应的时间值显示在标签中。为了保持时间的格式一致性，我们还编写了一个名为formatTime的函数，用于将时间格式化为两位数。

最后，我们使用setInterval函数，每隔一秒钟调用一次updateClock

4. Enfin, nous utilisons la fonctionsetIntervalpour appeler la fonctionupdateClocktoutes les secondes afin d'obtenir des mises à jour en temps réel de l'horloge.

Effet global

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!