Afficher l'heure sur votre site

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