11525 sujets

JavaScript, DOM et API Web HTML5

Bonjour à tous,

Je n'arrive pas mettre la date en js dans la page index.php, rien ne se passe quand je copie le code. Faut-il de l'Ajax ?

Pourtant mon script tarteaucitron.js fonctionne bien.

Merci à vous tous car là je ne sais pas.

Bruno.
Salut,
tu n'as pas besoin d'Ajax pour ça, tu dois appeler l'élément dans lequel tu veux inscrire ta date.

const el = document.getElementById('element'); //correspond à l'id de l'élément ou doit s'afficher la date
const date = new Date();

el.innerText = date.getDate() + '-' + date.getMonth() + '-' + date.getFullYear() //attention, les mois pour les date js commence à 0, c'est un tableau, donc Janvier à la position 0 dans le tableau

Modifié par RhumIsis (04 Jul 2023 - 16:56)
Modérateur
Salut,

RhumIsis a écrit :

...
tu n'as pas besoin d'Ajax pour ça,
...


à moins de vouloir connaître la date ou l'heure du serveur et non la date en local.
Bonjour Niuxe,

Oui c'est bien ça je veux la date et l'heure en temps réel et non figée comme en php.

Brusospel
Votre dernier post montre une incompréhension de la réponse de Niuxe... Si vous voulez la date en "temps réel" il faut bel et bien passer par la solution de RhumIsis.
Modifié par Olivier C (04 Jul 2023 - 22:44)
Olivier C a écrit :
Votre dernier post montre une incompréhension de la réponse de Niuxe... Si vous voulez la date en "temps réel" il faut bel et bien passer par la solution de RhumIsis.


Je me répète l'heure est figée comme en PHP donc ca ne me sert à rien c'est ca que je voulais dire et vous n'avez pas bien compris.
Merci.
Brusospel
J'avais compris que vous vouliez que le temps puisse s'actualiser constamment sur la page. Ce n'est donc pas ça...

Pour ceux que cette solution intéresserait tout de même : un CodePen.

Le code JS :
const el = document.getElementById('el');
const time = el => {
  const date = new Date();
  const dateFormat = `${('0' + date.getDate()).slice(-2)}/${('0' + Number(date.getMonth() + 1)).slice(-2)}/${date.getFullYear()} ; ${('0' + date.getMinutes()).slice(-2)}:${('0' + date.getSeconds()).slice(-2)}`;
  el.innerText = dateFormat;
}
setInterval(() => time(el), 1000);

Nota bene : j;ai horreur de travailler avec l'objet Date() en javascript, en attendant une remise à niveau prochaine de JS, qui ne devrait plus tarder, j'utilise tout de même ici cet objet pour ne pas charger inutilement une lib'.
Modifié par Olivier C (05 Jul 2023 - 10:04)
La solution proposé par Olivier fonctionne très bien, il manque juste l'heure H Smiley cligne

NB: je deteste également cet objet
Juste pour info : la prochaine API censée remplacer l'objet Date s'appellera "Temporal". Elle est dans les tuyaux et corrigera la majorité des défauts de l'objet Date. En attendant, personnellement j'utilise luxon.js.
RhumIsis a écrit :
La solution proposé par Olivier fonctionne très bien, il manque juste l'heure H Smiley cligne

NB: je deteste également cet objet


Re,

Pour moi rien ne s'affiche dans le navigateur.
Comme si le code n'était pas copié.
Si ça marche dans le CodePen ça marche dans n'importe quelle page web. Tel quel.

Donc, pour l'exemple proposé, un élément HTML comportant l'ID "#el" doit être présent dans la page.
Modifié par Olivier C (05 Jul 2023 - 14:41)
Meilleure solution
(c'est un fichier index.php)
<!DOCTYPE html>
<html lang="fr">

<head>
<meta http-equiv="content-type" content="text/html; charset=utf-8">
<meta name="Author" content="Bruno Proux">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta name="description" content="Assemblage de pc, sites web, logos et r?daction web">
<title>Informatico, sites web et logos</title>
<link rel="stylesheet" type="text/css" href="informatico.css">


</head>


<body>
<script type="text/javascript">
const el = document.getElementById('el');
const time = el => {
const date = new Date();
const dateFormat = `${('0' + date.getDate()).slice(-2)}/${('0' + Number(date.getMonth() + 1)).slice(-2)}/${date.getFullYear()} ; ${('0' + date.getMinutes()).slice(-2)}:${('0' + date.getSeconds()).slice(-2)}`;
el.innerText = dateFormat;
}
setInterval(() => time(el), 1000);
</script>

</body>
</html>

Voilà une copie de visual studio code sous windows 11 pro.

Dans Firefox c'est une page blanche donc vierge.
brusospel
brusospel a écrit :


Dans Firefox c'est une page blanche donc vierge.
brusospel


Salut

Relis la réponse d'Olivier C Smiley smile s'il te plait,
Tu n'a aucun élément dans ta page, pour fonctionner ça va être compliquer

merci
Modifié par JENCAL (05 Jul 2023 - 16:12)
JENCAL a écrit :


Salut

Relis la réponse d'Olivier C Smiley smile

merci


Cornichon que je suis j'avais oublié le div. Merci encore ça marche maintenant.

brusospel
Modérateur
Je suis intervenu pour dire que la date du serveur peut être différente de la date du serveur. Pour une commande par exemple (remise de 10% avant le ... à ... ), la date en local, on s'en fout.

@Olivier : +1 pour ton code
Modifié par niuxe (05 Jul 2023 - 20:38)