Vous vous apprêtez à lire un tutoriel rédigé par un membre de ce site. Malgré tout le soin que ce membre a pu apporter au tutoriel, nous ne pouvons pas garantir que les informations contenues sur cette page sont exactes à 100%. Merci de garder cela en tête lorsque vous lirez cette page ;o)
Le principe est simple : afficher en actualisant toutes les secondes l'heure (heures-minutes-secondes) et la date, en français et dans le format
36 Février 2100 (c'est pour l'exemple
).
Je vous prépare le terrain xHTML :
Code : HTML1 | <div id="date_heure"></div>
|
Voilou c'est tout !
Vous n'avez plus qu'à coder. Ce script est
vraiment très simple.
Élaborons la structure de notre fonction :
Code : JavaScript1
2
3
4
5
6
7 | function date_heure() {
//Affichage
}
window.onload = function() {
setInterval('date_heure()', 1000); //On actualise l'heure toutes les secondes
};
|
Pour savoir quel jour on est et quelle heure il est, on a besoin d'un objet
Date() (logique, quand on y pense
). J'en profite pour vous donner
les méthodes de l'objet Date. On va donc le créer :
Code : JavaScript1
2
3
4
5 | function date_heure() {
var infos = new Date();
//Affichage
}
|
Rien de bien compliqué : on affiche les heures, les minutes, et les secondes dans une jolie phrase :
document.getElementById('date_heure').innerHTML = 'Il est ' + infos.getHours() + ' heures ' + infos.getMinutes() + ', ' + infos.getSeconds() + '.';
Aïe ! Ça n'affiche pas "0" devant les nombres inférieurs à 10, c'est pas beau
Qu'à cela ne tienne, créons une fonction pour compléter ces fichus nombres avec un 0 !
Code : JavaScript1
2
3 | function compZero(nombre) {
return nombre < 10 ? '0' + nombre : nombre;
}
|
Et voilà le travail.
On modifie notre petit script :
Code : JavaScript1
2
3
4
5
6
7
8
9 | function compZero(nombre) {
return nombre < 10 ? '0' + nombre : nombre;
}
function date_heure() {
var infos = new Date();
document.getElementById('date_heure').innerHTML = 'Il est ' + compZero(infos.getHours()) + ' heures ' + compZero(infos.getMinutes()) + ', ' + compZero(infos.getSeconds()) + '.';
}
|
Avant de créer l'affichage de la date, il va falloir préparer quelques petites choses :
- les noms de mois en français ;
- les noms de jours en français.
On va donc créer deux arrays :
Code : JavaScript1
2 | var mois = new Array('janvier', 'février', 'mars', 'avril', 'mai', 'juin', 'juillet', 'août', 'septembre', 'octobre', 'novembre', 'décembre');
var jours = new Array('lundi', 'mardi', 'mercredi', 'jeudi', 'vendredi', 'samedi', 'dimanche');
|
Ensuite, on va devoir bricoler un peu : on se sert du nombre renvoyé par
getDay() comme indice de l'array des jours pour accéder au nom français du jour. On fait la même chose pour les mois (
getMonth()) et leur array.
Stoop !!! Info de dernière minute : getDay() fait commencer la semaine par le dimanche ; il faut modifier l'array des jours !
Voilà la correction :
Code : JavaScript1
2
3
4 | var mois = new Array('janvier', 'février', 'mars', 'avril', 'mai', 'juin', 'juillet', 'août', 'septembre', 'octobre', 'novembre', 'décembre');
var jours = new Array('dimanche', 'lundi', 'mardi', 'mercredi', 'jeudi', 'vendredi', 'samedi');
document.getElementById('date_heure').innerHTML += ' et nous sommes le ' + jours[temps.getDay()] + ' ' + temps.getDate() + ' ' + mois[temps.getMonth()] + ' ' + temps.getFullYear() + '.';
|
Comme je comprends ceux qui aiment le copier-coller
. Je suis de bonne humeur, je vous donne le code source complet du script
:
Code : JavaScript 1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19 | function compZero(nombre) {
return nombre < 10 ? '0' + nombre : nombre;
}
function date_heure() {
const infos = new Date();
//Heure
document.getElementById('date_heure').innerHTML = 'Il est ' + compZero(infos.getHours()) + ' heures ' + compZero(infos.getMinutes()) + ', ' + compZero(infos.getSeconds());
//Date
const mois = new Array('janvier', 'février', 'mars', 'avril', 'mai', 'juin', 'juillet', 'août', 'septembre', 'octobre', 'novembre', 'décembre');
const jours = new Array('dimanche', 'lundi', 'mardi', 'mercredi', 'jeudi', 'vendredi', 'samedi');
document.getElementById('date_heure').innerHTML += ' et nous sommes le ' + jours[infos.getDay()] + ' ' + infos.getDate() + ' ' + mois[infos.getMonth()] + ' ' + infos.getFullYear() + '.';
}
window.onload = function() {
setInterval("date_heure()", 1000); //Actualisation de l'heure
};
|
Remarquez que j'ai fait des variables infos, mois et jours des constantes, tout simplement parce que l'on ne les modifie pas.
Tutoriels
Communauté
Mon compte
Recherche
Livre d'or
Publicité
507 Zéros connectés |
8 requêtes |
0.0444s (0.0269s)
