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 😉
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" :