Horloges HTML5

Signaler
-
 Lubar -
Bonjour,
J'aimerai connaitre la procédure pour réaliser une horloge en html5, et comment la faire fonctionner sur mon ordinateur, j'ai depuis longtemps réalisé de nombreuses horloges en flash, mais malheureusement flash n'aura bientôt plus cours, existe t'il un moyen de transformer flash en html ??. mon site "alexoleron.com"
Cordialement
Alexeline

5 réponses

Bonjour,
Je viens de créer un site internet pour une association de randonneurs avec Google Sites.
Dans certaines pages j'ai mis un widget horloge gratuit simple qui fonctionne très bien.
Si cela vous intéresse je pourrai vous donner le lien.
Bonne soirée.
Guy
Bonjour Guy,
Pourrais tu m'envoyer un modèle simple que je pourrais modifier pour bien comprendre le fonctionnement.
Cordialement
Alexeline
Messages postés
5969
Date d'inscription
mercredi 19 janvier 2005
Statut
Contributeur
Dernière intervention
24 janvier 2021
1 363
Bonjour,

En HTML seul, ce n'est pas possible, il faut du JavaScript et du CSS :

https://www.qwant.com/?q=javascript+css+horloge&t=web

Bonjour et Merci pour cette réponse rapide,
Je vais lire et relire, mais ce qui m'aiderais vraiment c'est un modèle, même simple que je pourrais faire tourner sur mon ordinateur, que je pourrais modifier pour comprendre ce que je fais.
Quel logiciel me faut il pour faire tourner le script??
Puis je faire tourner directement sur mon ordinateur ??
Mes questions peuvent paraitres naïves mais quand on débute quelque chose il faut un minimum d'explication, j'ai près de 80 ans et tout ce que je sais je l'ai appris sur le net.
J'apprends assez vite, mais il me faut un minimum d'explication.
Encore merci pour ton aide.
Cordialement
Alexeline
Messages postés
5969
Date d'inscription
mercredi 19 janvier 2005
Statut
Contributeur
Dernière intervention
24 janvier 2021
1 363
Je n'ai pas de modèle à te fournir, mais c'est assez bien expliqué dans les différents sites trouvés avec la recherche.

Tu n'as besoin que d'un navigateur pour afficher ce type d'horloge en HTML, CSS et JavaScript.
Salut,
pour des explications le plus simple est de rechercher par vous même, à commencer par les généralités pour aller vers un but spécifique.
Sans être inabordable pour personne cela présuppose des notions des techniques et technologies.

Vous parlez d'HTML dans sa version 5 mais pratiquez vous HTML?
Ce que vous demandez fait référence à d'autres technologies qui sont associées au HTML et s'imbriquent dans le texte de ce langage.
HTML est la présentation des contenus et leur nomenclature, un texte équivalent à une liste de course sauf que le contenu n'est pas HTML, il est inclus.

Pour écrire dans un texte (HTML soit "langage de balises hypertexte" HyperText Markup Language en anglais) une image va être mise à disposition en indiquant son adresse sur le réseau qui permet de la charger et l'afficher dans le navigateur.

La séparation est faite du contenu et de la forme. Par exemple les textes affichés dans la page sont indiqués différemment en fonction qu'ils soient paragraphe, titre ou autre nature...
La mise en page, présentation comme des cadres, couleurs, tailles des textes est modifié par une technologie annexe qui est greffée/incluse dans le fichier texte du HTML.
C'est le CSS qui permet d'avoir une présentation/mis en page. Idéalement il est dans un fichier externe chargé par HTML.

Il en est de même avec JavaScript qui peut être inclus aussi bien à HTML.
JavaScript est un langage de programmation(ce que ne sont pas HMTL , CSS ou une image) et permet des instructions et fonctions.
Il est particulièrement utilisé pour les pages web(HTML) notamment pour réagir à des événements provoqués par l'utilisateur: l'interactivité.
Dans le cas d'une animation ou de changer l'affichage d'un contenu(comme mettre à jour le texte de l'heure) il est particulièrement pratique car permet déjà de récupérer l'heure pour pouvoir l'afficher dans le HTML .

Cela est beaucoup plus simple dans le principe qu'il l'est de l'expliquer.
C'est pour cela que vous trouverez de meilleurs informations et apprendrez mieux en faisant vous même les recherches et selon les mots clés techniques et points qui vous semblent obscurs.
Mieux encore puisque plusieurs technologies sont impliquées il faudra pratiquer et cela reste indispensable pour tout langage.

Vous trouverez aisément des cours complets pour tous les niveaux à suivre et réaliser.
Ensuite si vous cherchez seulement le résultat cela demandera beaucoup moins d'effort.
Il vous suffira de copier un script tout fait dans l'emplacement nécessaire.
Mais il vous faut en priorité savoir de quoi il s'agit au moins dans les grandes lignes.

===> (moteur de recherche)===>' apprendre HTML, apprendre JavaScript, script d'horloge, ...etc...
multipliez les recherches et ne vous limitez pas à une source

Cela reste un truc basique et un bon exemple d’apprentissage un horloge qui va changer l'affichage d'un élément de la page. Il apporte la notion de boucle et d'une action(programmation) effectuée à intervalle régulière: ici toutes les secondes.

Bon travail pour acquérir quelques bases en écrivant les fichiers d'un site.
> TomMerylin
Bonjour et merci,
J'ai bien pris note de vos explications, en fait je recherche un modèle d'horloge html, que je puisse faire fonctionner pour bien comprendre le maniement , j'ai peut être mal cherché, mais je n'ai rien trouvé.
Avec un modèle je pourrais modifier et comprendre ce que je fais, j'ai bien réalisé de nombreuses horloges en flash, mais il faut que je me recycle, flash est bientôt hors jeu.
Cordialement
Alexeline
mon mail ***@***
Messages postés
3576
Date d'inscription
mercredi 20 septembre 2006
Statut
Membre
Dernière intervention
13 janvier 2021
802
Le site indiqué est classé dangereux par Norton :
BLOQUÉ PAR NortonLifeLock
Page web dangereuse bloquée
Vous avez tenté d’accéder à :
http://a l e x o l e r o n . c o m/
Il s’agit d’une page web dangereuse connue. Il est fortement recommandé de ne PAS visiter cette page.

:-(
Un exemple d'horloge en JavaScript.
Mais bon pour apprendre c'est surtout la méthode/syntaxe qui compte et non pas un exemple qui n'est qu'anecdotique:

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title>exemple d'horloge JavaScript</title>
<script>
function timeDisp(){
let nowdate=new Date();
document.getElementById('horloge').innerHTML=(nowdate.getHours()>9?nowdate.getHours():'0'+nowdate.getHours())+':'+(nowdate.getMinutes()>9?nowdate.getMinutes():'0'+nowdate.getMinutes())+':'+(nowdate.getSeconds()>9?nowdate.getSeconds():'0'+nowdate.getSeconds());
}
setInterval(timeDisp, 1000);//-- précision horloge à la seconde
</script>
</head>
<body>
<span id=horloge></span>
</body>
</html>



J'aurais pu décomposer un peu et ne pas utiliser le test en ternaire mais juste pour donner une idée de comme c'est simple à faire... pour peu qu'on sache les bases de JavaScript...exercice d'école ça en général car il aborde plusieurs notions basique et donne un résultat assez facilement(5 lignes de code ici)