Horloge à palettes
Une horloge numérique à palettes avec plein écran, mode 12/24 h et secondes optionnelles.
Synchronisation de l'heure
AM
--
--
Heures
--
--
Minutes
--
--
Secondes
Qu'est-ce qu'une horloge à palettes ?
Une horloge à palettes est une horloge numérique qui affiche l'heure avec des animations de cartes qui tournent, inspirée des horloges mécaniques classiques du milieu du XXe siècle. Ces horloges emblématiques sont devenues populaires pour leur attrait visuel unique et leur charme nostalgique, utilisant des cartes physiques qui tournent pour afficher les chiffres changeants.
Cet outil recrée parfaitement l'effet classique de l'horloge à palettes avec des animations réalistes de tourne-pages à chaque changement de chiffre. Elle fonctionne directement dans votre navigateur sans téléchargement, avec mode plein écran, changement de format 12/24 heures et affichage optionnel des secondes.
Parfait pour : horloge de bureau, décoration de bureau, fond de streaming en direct, minuteur de présentation, technique Pomodoro, grands écrans et plus. Tous les calculs de temps se font localement, protégeant votre vie privée.
Cet outil recrée parfaitement l'effet classique de l'horloge à palettes avec des animations réalistes de tourne-pages à chaque changement de chiffre. Elle fonctionne directement dans votre navigateur sans téléchargement, avec mode plein écran, changement de format 12/24 heures et affichage optionnel des secondes.
Parfait pour : horloge de bureau, décoration de bureau, fond de streaming en direct, minuteur de présentation, technique Pomodoro, grands écrans et plus. Tous les calculs de temps se font localement, protégeant votre vie privée.
Comment utiliser
Comment utiliser
- L'horloge affiche automatiquement l'heure actuelle et se met à jour en temps réel
- Cliquez sur le bouton « 12H/24H » pour changer le format de l'heure
- Cliquez sur le bouton « Secondes/Pas de secondes » pour afficher ou masquer les secondes
- Cliquez sur le bouton « Plein écran » pour passer en mode plein écran
- Les paramètres sont enregistrés automatiquement et restaurés à la prochaine visite
Conseils
- Utilisez le mode plein écran sur un projecteur, un écran mural ou une tablette d'appoint lorsque l'horloge doit être lisible depuis l'autre bout de la pièce.
- Désactivez la mise en veille du système ou l'atténuation de l'écran si l'horloge doit rester visible pendant des réunions, cours ou événements.
- Privilégiez le format 24 heures pour des plannings partagés entre régions, et n'affichez les secondes que lorsque la précision au temps est importante.
Cas d’utilisation
Afficher une horloge lisible sur un deuxième écranAffichez l’heure locale avec des cartes animées, du texte de date localisé et un mode plein écran optionnel pour les bureaux, studios, salles de classe, ateliers ou fonds de streaming. La page ne lit que l’horloge système locale via l’API JavaScript Date et utilise les transformations CSS3 pour l’animation de retournement ; elle n’appelle jamais de serveur horaire distant et ne nécessite aucune inscription ni compte cloud pour fonctionner.
Basculer entre des modes d’affichage pratiquesActivez ou désactivez les secondes et choisissez l’affichage 12 heures ou 24 heures selon que l’horloge sert au chronométrage précis, à l’affichage ambiant ou à un écran de présentation. Sans les secondes, les cartes ne se retournent qu’une fois par minute, ce qui produit un défilement plus calme adapté aux ambiances ; avec les secondes, les cartes des minutes et des heures se retournent toujours ensemble au début de chaque minute pour rester lisibles à distance.
Garder le temps visuellement clair sans configurer d’alarmesLa page est une horloge d’affichage, pas un minuteur ni un planificateur. Utilisez-la lorsque la visibilité importe ; recours aux outils de compte à rebours ou de Pomodoro lorsque vous avez besoin d’alertes, de sessions ou de suivi du temps écoulé. Maintenez l’horloge système précise car l’affichage suit l’heure locale du navigateur.
Afficher les secondes pour le studio, les masquer pour l’ambianceActiver la ligne des secondes donne un rythme plus net pour les sessions d’enregistrement et les conférences en direct ; la désactiver produit un affichage plus apaisant pour un mur de bureau, un hall ou une salle d’attente où le défilement serait distrayant. Le retournement est rendu par une transformation 3D CSS3 avec une valeur de perspective, et les cartes utilisent une fente numérique à chasse fixe pour que le « 2 » plus large ou le « 1 » plus étroit ne décale pas la mise en page et ne provoque pas de tremblement d’un pixel à chaque battement.
Associer l’horloge à un compte à rebours séparé pour les sessionsLa page est un affichage, pas un minuteur ; utilisez-la avec une application Pomodoro ou de compte à rebours dédiée lorsque les sessions, conférences ou réunions nécessitent une marque de fin visible. Le temps reste cohérent entre les fenêtres car les deux pages lisent la même horloge système. Le bouton plein écran utilise l’API requestFullscreen du navigateur pour projeter la page sur un projecteur, un écran de kiosque ou une tablette d’appoint sans barre d’adresse, ce qui suffit pour une horloge murale de salle de réunion et évite la configuration supplémentaire d’une application kiosque native.
Principe technique
Chaque carte de chiffre est scindée en une moitié supérieure affichant la valeur actuelle et une moitié inférieure affichant la valeur suivante, avec une troisième couche positionnée en absolu qui pivote de 0deg à -180deg autour de l'axe X. Le parent reçoit perspective: 600px afin que la rotation soit perçue comme une profondeur 3D plutôt qu'un aplatissement vertical, et backface-visibility: hidden sur la couche en rotation empêche la face arrière miroir de transparaître. Le navigateur promeut la couche vers sa propre surface de composition lorsque will-change: transform est défini, de sorte que l'animation s'exécute sur le GPU au lieu de repeindre le texte à chaque image.
L'heure elle-même provient de Date.now() en millisecondes depuis l'époque Unix, mais un setInterval(fn, 1000) naïf dérive car les minuteurs s'exécutent selon une planification au mieux et accumulent un décalage. L'outil planifie plutôt le prochain tick en calculant 1000 - (Date.now() % 1000) pour que la frontière tombe sur la seconde réelle de l'horloge, et utilise requestAnimationFrame pour la transition de retournement afin que l'animation se mette en pause automatiquement lorsque l'onglet perd le focus ou que l'écran est en veille. L'API Page Visibility (document.visibilityState) resynchronise les chiffres affichés lors de l'événement visibilitychange, évitant une valeur obsolète lorsque l'utilisateur revient après plusieurs minutes.
Le formatage de l'affichage lit la locale du navigateur via Intl.DateTimeFormat avec l'option hourCycle ('h23' pour 24 heures, 'h12' pour 12 heures avec AM/PM). Les transitions d'heure d'été sont gérées implicitement car les méthodes Date comme getHours() retournent déjà l'heure locale incluant les décalages de fuseau horaire, de sorte que l'horloge passe de 02h00 à 03h00 au printemps et affiche 01h00 deux fois en automne sans logique supplémentaire.
L'heure elle-même provient de Date.now() en millisecondes depuis l'époque Unix, mais un setInterval(fn, 1000) naïf dérive car les minuteurs s'exécutent selon une planification au mieux et accumulent un décalage. L'outil planifie plutôt le prochain tick en calculant 1000 - (Date.now() % 1000) pour que la frontière tombe sur la seconde réelle de l'horloge, et utilise requestAnimationFrame pour la transition de retournement afin que l'animation se mette en pause automatiquement lorsque l'onglet perd le focus ou que l'écran est en veille. L'API Page Visibility (document.visibilityState) resynchronise les chiffres affichés lors de l'événement visibilitychange, évitant une valeur obsolète lorsque l'utilisateur revient après plusieurs minutes.
Le formatage de l'affichage lit la locale du navigateur via Intl.DateTimeFormat avec l'option hourCycle ('h23' pour 24 heures, 'h12' pour 12 heures avec AM/PM). Les transitions d'heure d'été sont gérées implicitement car les méthodes Date comme getHours() retournent déjà l'heure locale incluant les décalages de fuseau horaire, de sorte que l'horloge passe de 02h00 à 03h00 au printemps et affiche 01h00 deux fois en automne sans logique supplémentaire.
- Retournement 3D : CSS transform: rotateX(-180deg) sur une couche absolue, parent perspective: 600px, backface-visibility: hidden pour supprimer la face arrière miroir
- Composition GPU : will-change: transform promeut l'élément en rotation vers sa propre couche pour que les transitions soient composées et non repeintes
- Tick sans dérive : le délai de setTimeout est calculé comme 1000 - (Date.now() % 1000) pour que chaque tick s'aligne sur la frontière de seconde réelle au lieu d'accumuler un décalage de minuteur
- Synchronisation de l'animation : requestAnimationFrame pilote la transition de 0deg à -180deg, que le navigateur ralentit automatiquement dans les onglets en arrière-plan
- Récupération en arrière-plan : l'API Page Visibility écoute visibilitychange et relit Date.now() pour que les chiffres sautent à la valeur correcte lorsque l'onglet regagne le focus
- Locale et cycle horaire : Intl.DateTimeFormat avec hourCycle 'h23' ou 'h12' sélectionne l'affichage 24 heures ou 12 heures AM/PM à partir de la locale système de l'utilisateur
- Contrôle plein écran : Element.requestFullscreen() et document.exitFullscreen() pilotent le mode affichage mural avec Échap comme touche de sortie standard
Exemples
Utilisation sur le bureau
Redimensionnez la fenêtre du navigateur pour l'ajuster à un coin de votre bureau comme horloge persistante.Affichage sur grand écran
Connectez un projecteur ou un grand écran, appuyez sur F11 pour le plein écran, affichez en salle de réunion ou lors d'événements.Arrière-plan de streaming en direct
Ajoutez une source navigateur dans OBS avec l'URL de l'horloge à rabats comme arrière-plan de streaming.FAQ
Quel fuseau horaire l'horloge utilise-t-elle ?
Le fuseau horaire local de votre appareil, défini par le système d'exploitation. Pour afficher un autre fuseau, utilisez un outil d'horloge mondiale dédié. L'horloge suit la notion de temps du système, donc les VPN et l'usurpation de fuseau horaire ne la modifient pas.
Puis-je basculer entre le format 12 et 24 heures ?
Oui. Activez l'option dans les paramètres. Le format 12 heures affiche AM/PM ; le format 24 heures affiche 00-23 sans AM/PM. Choisissez l'un ou l'autre selon votre préférence ; certaines versions s'alignent par défaut sur la locale du système d'exploitation.
Pourquoi l'aiguille des secondes saute-t-elle parfois de plus d'une seconde ?
Limitation des onglets en arrière-plan. Quand vous changez d'onglet, les navigateurs ralentissent la fréquence de mise à jour ; au retour, l'horloge rattrape en sautant. Gardez l'onglet au premier plan pour une animation fluide. Si elle saute alors qu'elle est au premier plan, votre processeur est surchargé — vérifiez ce qui tourne par ailleurs.
L'animation de bascule a-t-elle un impact sur les performances ?
L'animation CSS transform est accélérée par le GPU et légère sur les appareils modernes. Sur les anciens portables ou téléphones, vous pouvez voir un léger à-coup chaque seconde. Désactivez l'animation de bascule dans les paramètres si vous préférez un cadran statique.
Puis-je la laisser tourner en plein écran toute la nuit ?
Oui — elle est conçue pour un usage en plein écran comme horloge de bureau ou de chevet. Les OS modernes vont atténuer ou mettre l'écran en veille à moins que vous ne l'empêchiez (réglez « ne jamais mettre en veille » dans les paramètres d'affichage, ou utilisez un outil NoSleep de l'OS). Sur portable, branchez-le sur secteur ; les modes veille batterie mettront l'onglet en pause.
Restera-t-elle précise sur plusieurs heures ?
Oui. L'horloge est pilotée par l'horloge système, qui reste synchronisée via NTP sur les appareils en réseau. La dérive sur 24 heures est typiquement inférieure à une seconde sur un OS moderne.
Quelque chose est-il téléversé ?
Non. L'horloge lit l'heure de votre appareil. Rien n'est journalisé ni transmis.