Correction javascript date et heure

Fermé

Ludo - Modifié par Ludo le 19/01/2016 à 10:17
sangwi - 22 janv. 2016 à 08:43

Bonjour,

Après plusieurs essais, j'ai enfin réussit à afficher sur ma page HTML ce que je voulais, à savoir :
- Le jour de la semaine
- Le jour du mois
- Le mois complet en français
- L'année
- L'heure sans les secondes

L'heure devant se mettre à jour toute les secondes, la date devant changer lorsqu'elle change.

Pouvez-vous me dire si mon code est correct ? :)


<p>Nous sommes le <span id="jour-sem"></span> <span id="jour"></span> <span id="mois"></span> <span id="annee"></span>, il est <span id="heure"></span></p>

<script type="text/javascript">
 function Timer() {
  var dt=new Date()
  document.getElementById('heure').innerHTML=dt.getHours()+":"+dt.getMinutes();
  setTimeout("Timer()",1000);
 }
 Timer();
 var d = new Date();
 var days = ["Dimanche","Lundi","Mardi","Mercredi","Jeudi","Vendredi","Samedi"];
 document.getElementById("jour-sem").innerHTML = days[d.getDay()];
 document.getElementById("jour").innerHTML = [d.getDate()];
 var months = ["Janvier","Février","Mars","Avril","Mai","Juin","Juillet","Août","Septembre","Octobre","Novembre","Décembre"];
 document.getElementById("mois").innerHTML = months[d.getMonth()];
 document.getElementById("annee").innerHTML = [d.getFullYear()];
</script>

Merci ! :D

Edit : Minnce je viens de m'apercevoir que les minutes ne s'affichent pas toujours avec deux chiffres, une idée ? J'arrive pas à mêler tout ce que je trouve sur le net :(

A voir également:

Correction javascript date et heure
Telecharger javascript - Télécharger - Langages
35 go internet équivalent en heure ✓ - Forum Mobile
Cette photo n’a pas été prise cette année. trouvez la date, l'heure et avec quel modèle d'appareil photo elle a été prise. - Forum Samsung
Convertir heure en centième excel ✓ - Forum Excel
1go internet = combien d'heure ✓ - Forum Réseaux sociaux

1 réponse

Réponse 1 / 1

Pitet Messages postés 2826 Date d'inscription lundi 11 février 2013 Statut Membre Dernière intervention 21 juillet 2022 524
19 janv. 2016 à 14:13

Salut,

Ton code semble correct.

Pour afficher les minutes sur deux chiffres, le plus simple est de vérifier si le nombre de minutes est inférieur à 10 et d'ajouter le caractère 0 devant si c'est le cas (exemple ci-dessous avec l'écriture ternaire).

Puisque la plus petite unité affichée est la minute et non la seconde, tu peux donc mettre à jour l'heure toutes les minutes plutôt que chaque seconde afin d'optimiser un peu ton script.

<p>Nous sommes le <span id="jour-sem"></span> <span id="jour"></span> <span id="mois"></span> <span id="annee"></span>, il est <span id="heure"></span></p>

<script type="text/javascript">
function Timer() {
	var dt=new Date()
	document.getElementById('heure').innerHTML = dt.getHours() + ":" + ((dt.getMinutes() < 10 ? '0' : '') + dt.getMinutes());
	setTimeout("Timer()",60000);
}

Timer();
var d = new Date();
var days = ["Dimanche","Lundi","Mardi","Mercredi","Jeudi","Vendredi","Samedi"];
document.getElementById("jour-sem").innerHTML = days[d.getDay()];
document.getElementById("jour").innerHTML = [d.getDate()];
var months = ["Janvier","Février","Mars","Avril","Mai","Juin","Juillet","Août","Septembre","Octobre","Novembre","Décembre"];
document.getElementById("mois").innerHTML = months[d.getMonth()];
document.getElementById("annee").innerHTML = [d.getFullYear()];
</script>

Bonne journée,

Ludo
19 janv. 2016 à 22:10

Merci Pitet, ça fonctionne ! :)

Bonne idée de réduire l'intervalle de mise à jour, je n'y avais pas pensé.

Sais-tu pourquoi lorsque je met ce script dans un fichier "script.js" que j'appelle dans le head de mon fichier html, ça ne fonctionne plus ? :/

Pitet Messages postés 2826 Date d'inscription lundi 11 février 2013 Statut Membre Dernière intervention 21 juillet 2022 524
20 janv. 2016 à 09:17

Parce que ton fichier contient du code html ? (la balise <p>Nous sommes le...)
Peux tu nous montrer tes codes sinon ?

Ludo
20 janv. 2016 à 10:12

Oui il y a du html, voilà mon code :


<!DOCTYPE html>
<html lang="fr">
	<head>
		<title>Horaires du magasin Semaine 3 - 2016</title>
		<meta charset="utf-8"/>
		<link rel="stylesheet" type="text/css" href="ressources/style.css"/>
		<meta name="robots" content="noindex, nofollow"/>
		<script type="text/javascript" src="ressources/script.js"></script>
	</head>
	<body>
		<header>

			<div class="col-1">
				<p><img id="logo" src="ressources/logo-pam.jpg" alt="logo du magasin"/>
				<p><a href="#" class="btn-1" title="Revenir à l'accueil">Accueil</a></p> 
			</div>
			<div class="col-2">
				<h1>Magasin</h1>
				<h2>Horaires de la semaine 3</h2>
				<p id="comp-date">
					Nous sommes le <span id="jour-sem"></span> <span id="jour"></span> <span id="mois"></span> <span id="annee"></span>, il est <span id="heure"></span>
				</p>
			</div>
		</header>
		<article>
			<p>
				<iframe width="100%" height="400" src="https://docs.google.com/spreadsheets/***"></iframe>
			</p>
			<p id="note">Note : S'il y a des modifications apportées aux horaires, il faut compter quelques minutes pour qu'elles s'affichent.</p>
		</article>
	</body>
</html>

Pitet Messages postés 2826 Date d'inscription lundi 11 février 2013 Statut Membre Dernière intervention 21 juillet 2022 524
Modifié par Pitet le 20/01/2016 à 13:48

Le fichier script.js ne doit pas contenir de code html, uniquement du javascript.

La solution est donc de déplacer la balise <p>Nous sommes le... dans le fichier html et de supprimer les balises script dans le fichier script.js (qui ne doit contenir que le code javascript).

Edit: je n'avais pas vérifier que tu avais déjà bien déplacer l'affichage de l'heure dans le fichier html.
Tu auras par contre un autre problème dû au fait que ton script js est exécuté dès son chargement, le problème étant que lorsque le javascript est chargé et exécuté, ton code html lui n'est pas encore complètement chargé et l'instruction document.getElementById('heure') va retourner une erreur puisque l'élément n'existe pas encore.
La solution est donc de dire à javascript d'attendre le chargement complet de la page avant d'exécuter le script. Le plus simple pour faire cela est de définir une fonction sur l'événement onload de la page.

En résumé ton fichier script.js devrait donc contenir le code suivant :

// on attent que la page soit chargée pour exécuter la fonction initialize()
window.onload = initialize;

function initialize() {
	Timer();
	var d = new Date();
	var days = ["Dimanche","Lundi","Mardi","Mercredi","Jeudi","Vendredi","Samedi"];
	document.getElementById("jour-sem").innerHTML = days[d.getDay()];
	document.getElementById("jour").innerHTML = [d.getDate()];
	var months = ["Janvier","Février","Mars","Avril","Mai","Juin","Juillet","Août","Septembre","Octobre","Novembre","Décembre"];
	document.getElementById("mois").innerHTML = months[d.getMonth()];
	document.getElementById("annee").innerHTML = [d.getFullYear()];
}

function Timer() {
	var dt = new Date();
	document.getElementById('heure').innerHTML = dt.getHours() + ":" + ((dt.getMinutes() < 10 ? '0' : '') + dt.getMinutes());
	setTimeout("Timer()",60000);
}

Ludo
21 janv. 2016 à 19:35

Génial, le code fonctionne ! Merci beaucoup ! :D

Une dernière chose, sais-tu si la date se met à jour comme l'heure : toute les minutes ?

Discussions similaires

Pix

Problème Whatsapp - "La date est incorrecte"

Je tiens combien de temps avec 2Go d'internet ?

Connaitre la date d'une photo.

Prélèvement JM Jacquie et Michel date.

Discussions similaires

Newsletters