WhatZeWeb

show me code
  • Accueil
  • Blog
  • Cours
  • Accueil
  • Blog
  • Afficher lheure sur votre site

Afficher l'heure sur votre site

  • JavaScript
  • Tuto
JavaScript

Dans ce tuto, nous allons afficher l'heure sur votre site.
Pour bien suivre, il vous faudra des bases en HTML, CSS et JavaScript.

Voici la structure HTML de base : 

<!DOCTYPE html>
<html lang="fr">
<head>
	<title>Afficher l'heure avec JavaScript</title>
</head>
<body>
	
</body>
</html>

Ajoutons une balise HTML vide qui va nous permettre d'afficher notre heure : 
 

<!DOCTYPE html>
<html lang="fr">
<head>
	<title>Afficher l'heure avec JavaScript</title>
</head>
<body>
	<h1 id="my-hour"></h1>
</body>
</html>

Il ne nous reste qu'à ajouter le code JavaScript : 

<!DOCTYPE html>
<html lang="fr">
<head>
	<title>Afficher l'heure avec JavaScript</title>
</head>
<body>
	<h1 id="my-hour"></h1>
	<script>
		function getTime () { 
			var date = new Date(); 
			var hours = date.getHours(); 
			var minutes = date.getMinutes(); 
			var seconds = date.getSeconds(); 
			hours = ((hours < 10) ? " 0" : " ") + hours;
			minutes = ((minutes < 10) ? ":0" : ":") + minutes; 
			seconds = ((seconds < 10) ? ":0" : ":") + seconds; 
			var myHour = document.getElementById("my-hour");
			myHour.textContent = hours + minutes + seconds;
			setTimeout("getTime()",1000); 
			
		}
		getTime();
	</script>
</body>
</html>

Quelques explications sur le code JavaScript : 
- la fonction getTime est définie et permet de récupérer la date courante (heures, minutes et secondes). Dans celle-ci, on se contente de récupérer les heures, minutes, et secondes actuelles. On sélectionne l'élément HTML qui va afficher notre contenu, ici la balise créée précédemment avec l'identifiant my-hour. On définit son contenu avec les heures minutes et secondes récupérées. La fonction setTimeout nous permet de répéter cette action.
- l'appel à getTime() nous permet d'exécuter la fonction.

Ajoutons un peu de CSS pour le fun : 

<!DOCTYPE html>
<html lang="fr">
<head>
	<title>Afficher l'heure avec JavaScript</title>
	<style>
		#my-hour{
			font-size: 20px;
			border-radius: 5px;
			border: solid 1px grey;
			display: inline;
			padding: 2px;
		}
	</style>
</head>
<body>
	<h1 id="my-hour"></h1>
	<script>
		function getTime () { 
			var date = new Date(); 
			var hours = date.getHours(); 
			var minutes = date.getMinutes(); 
			var seconds = date.getSeconds(); 
			hours = ((hours < 10) ? " 0" : " ") + hours;
			minutes = ((minutes < 10) ? ":0" : ":") + minutes; 
			seconds = ((seconds < 10) ? ":0" : ":") + seconds; 
			var myHour = document.getElementById("my-hour");
			myHour.textContent = hours + minutes + seconds;
			setTimeout("getTime()",1000); 
			
		}
		getTime();
	</script>
</body>
</html>

Et voilà le travail 😉

Retour au blog

Ajouté le : 10/01/2019 par Karim

Suggestion d'articles et de cours dans les mêmes catégories que "Afficher l'heure sur votre site" :

JavaScriptDes popups personnalisées en JavaScript
SymfonyGérez vos ressources avec Symfony
Arbre icônesUtilisez une police d'icônes
PHPConfigurer PHP pour afficher les erreurs
  • © WhatZeWeb. Tous droits réservés
  • Mentions légales