Horloge temps réel [javascript]
Résolu
letsfire_89
Messages postés
308
Statut
Membre
-
letsfire_89 Messages postés 308 Statut Membre -
letsfire_89 Messages postés 308 Statut Membre -
Bonjour,
Je dois faire une horloge en javascript utilisant setInterval() et clearInterval().
Voici mon fichier js:
Au début sans le clearInterval(), l'heure s'affichait par dessus l'ancienne heure toutes les secondes.
Je ne sais pas où mettre clearInterval() pour que l'heure se rafraichisse toutes les secondes.
Pourriez-vous m'aider SVP?
Merci
Je dois faire une horloge en javascript utilisant setInterval() et clearInterval().
Voici mon fichier js:
function chronos(){
var horloge;
horloge = document.getElementById("horloge")
var now=new Date();
with(now){
j=getDate();
m=getMonth();
fy=getFullYear();
h=getHours();
mm=getMinutes();
s=getSeconds();
}
horloge.innerHTML += "<br/>"+j+"/"+m+"/"+fy+"<br/>"+h+"H"+mm+"m"+s;
}
clearInterval(temporisation);
temporisation=setInterval('chronos()',1000);
Au début sans le clearInterval(), l'heure s'affichait par dessus l'ancienne heure toutes les secondes.
Je ne sais pas où mettre clearInterval() pour que l'heure se rafraichisse toutes les secondes.
Pourriez-vous m'aider SVP?
Merci
A voir également:
- Javascript horloge temps réel
- Maps satellite en temps réel - Guide
- Google maps trafic en temps réel - Guide
- Appli horloge - Télécharger - Guide Android
- Renommer plusieurs fichiers en même temps - Guide
- Horloge en ligne aesthetic - Télécharger - Thèmes & Fonds d'écran
1 réponse
SOLUTION:
page html:
fichier js:
page html:
<?xml version="1.0" encoding="UTF-8"?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="fr" >
<head>
<title>date et heure</title>
<link rel="stylesheet" media="screen" type="text/css" href="exY.css"/>
</head>
<body>
<script src="date.js" type="text/javascript"></script>
<noscript>
<p>
javascript non pris en charge
</p>
</noscript>
<div id="affichage_date"></div>
<p>
<a href="http://validator.w3.org/check?uri=referer">
<img src="http://www.w3.org/Icons/valid-xhtml10"
alt="Valid XHTML 1.0 Strict" height="31" width="88"/>
</a>
<a href="http://jigsaw.w3.org/css-validator/check/referer">
<img style="border:0;width:88px;height:31px"
src="http://jigsaw.w3.org/css-validator/images/vcss-blue"
alt="CSS Valide !"/>
</a>
</p>
</body>
</html>
fichier js:
// Initialise la fonction rafraichir qui a pour but de rafraichier la date toutes les secondes
function rafraichir()
{
// On initialise la variable text dans laquelle on affichera la date
var text = '';
// On initialise la fonction date qui nous servira a afficher les caractéristiques de la date (jour, mois, heure ...)
var date = new Date();
/* Fonction ' JOUR SEMAINE ' */
// Le jour de la semaine sera affiché de la façon : Lundi.
var jour_actuel = date.getDay();
var chaine_jour = Array('Dimanche', 'Lundi', 'Mardi', 'Mercredi', 'Jeudi', 'Vendredi',
'Samedi');
var jour_semaine = chaine_jour[jour_actuel];
/* Fonction ' JOUR ' */
// Le jour sera affiché de façon 20.
// Pour les jours de 1 a 9, on affichera donc un '0' devant.
if ( date.getDate() <= 9 )
{
var jour = '0'+date.getDate();
}
else
{
var jour = date.getDate();
}
/* Fonction ' MOIS ' */
var mois_actuel = date.getMonth();
var chaine_mois = Array('janvier', 'février', 'mars', 'avril', 'mai',
'juin', 'juillet', 'août', 'septembre', 'octobre', 'novembre',
'décembre');
var mois = chaine_mois[mois_actuel];
/* Fonction ' HEURES ' */
if ( date.getHours() <= 9 )
{
var heure = '0'+date.getHours();
}
else
{
var heure = date.getHours();
}
/* Fonction ' MINUTES ' */
if ( date.getMinutes() <= 9 )
{
var minutes = '0'+date.getMinutes();
}
else
{
var minutes = date.getMinutes();
}
/* Fonction ' SECONDES ' */
if ( date.getSeconds() <= 9 )
{
var secondes = '0'+date.getSeconds();
}
else
{
var secondes = date.getSeconds();
}
// On prépare l'affichage de la date et de l'heure
text += jour_semaine+' '+jour+' '+mois+' '+date.getFullYear();
text += '<br />';
text += heure+':'+minutes+':'+secondes;
// On indique que cette date sera affichée dans une balise dont l'"id" est "affichage_date"
document.getElementById('affichage_date').innerHTML = text;
}
// On écrit la balise dons l'id est "affichage_date"
// On peut aussi choisir une autre balise HTML !
document.write('<span id="affichage_date"></span>');
// Enfin, on rafraichi la fonction "rafraichir" toutes les secondes.
setInterval('rafraichir()',1000);
/* -- -- -- FIN -- -- -- */
