affichage de l'heure sur une page

affichage de l'heure sur une page - PHP - Programmation

Marsh Posté le 04-06-2009 à 21:14:26    

Bonjour bonjour.
Plus j'avance dans la programmation plus je vois qu'il y en a à savoir, et plus j'ai de problèmes. :D  
Le soucis est que je n'arrive pas à afficher l'heure en temps réél sur ma page web.
Vàlà mon code, js + php pour l'heure du serveur (PHP) et js pour l'affichage en temps réel.

Code :
  1. <body>
  2.  <script type="text/javascript">
  3.   <?php
  4.    // Enregistrons les informations de date dans des variables
  5.    $auj=getdate();
  6.    // Maintenant on peut afficher ce qu'on a recueilli    
  7.    echo "var heure=".$auj['hours'].";";
  8.    echo "var min=".$auj['minutes'].";";
  9.    echo "var sec=".$auj['seconds'].";";
  10.   ?>
  11.   function changeHeure(){
  12.    document.getElementById('jsphp').innerHTML="il est "+heure+" heures et "+min+" minutes et "+sec+" secondes";
  13.    setTimeout("changeHeure()",1000);
  14.   }
  15.   changeHeure();
  16.  </script>
  18.  <div id="jsphp"> </div>
  19. </body>


Alors chose étrange et incomprise, Firefox me dis

Citation :

Erreur : document.getElementById("jsphp" ) is null
Fichier Source : http://localhost/apprentissage%20P [...] /jsphp.php
Ligne : 26


J'ai bien sûr mis mon fichier en .php ^^.
merci pour votre aide !  :jap:

Message cité 1 fois

---------------
1000 lasagnes
Reply

Marsh Posté le 04-06-2009 à 21:14:26   

Reply

Marsh Posté le 04-06-2009 à 21:26:07    

essaie de mettre ta fonction changeHeure dans body ou window.onload
 
window.onload=changeHeure; sans les parentheses


---------------
http://petitjonas.blogspot.com/
Reply

Marsh Posté le 04-06-2009 à 22:06:11    

merci pour sa, du coup sa m'affiche bien l'heure comme je l'ai demandé, mais le timeout ne fait pas son travail, l'affichage n'est pas en temps réel mais juste au moment de la connexion. Si vous avez des idée de réponse ...  
merci !  :jap:


---------------
1000 lasagnes
Reply

Marsh Posté le 04-06-2009 à 22:49:52    

@l Oue$t a écrit :

Bonjour bonjour.
Plus j'avance dans la programmation plus je vois qu'il y en a à savoir, et plus j'ai de problèmes. :D  
Le soucis est que je n'arrive pas à afficher l'heure en temps réél sur ma page web.
Vàlà mon code, js + php pour l'heure du serveur (PHP) et js pour l'affichage en temps réel.

Code :
  1. <body>   
  2.         <script type="text/javascript">
  3.             <?php
  4.                 // Enregistrons les informations de date dans des variables
  5.                 $auj=getdate();
  6.                 // Maintenant on peut afficher ce qu'on a recueilli             
  7.                 echo "var heure=".$auj['hours'].";";
  8.                 echo "var min=".$auj['minutes'].";";
  9.                 echo "var sec=".$auj['seconds'].";";
  10.             ?>
  11.             function changeHeure(){
  12.                 document.getElementById('jsphp').innerHTML="il est "+heure+" heures et "+min+" minutes et "+sec+" secondes";
  13.                 setTimeout("changeHeure()",1000);
  14.             }
  15.             changeHeure();
  16.         </script>
  17.                
  18.         <div id="jsphp"> </div>   
  19.     </body>


Alors chose étrange et incomprise, Firefox me dis

Citation :

Erreur : document.getElementById("jsphp" ) is null
Fichier Source : http://localhost/apprentissage%20P [...] /jsphp.php
Ligne : 26


J'ai bien sûr mis mon fichier en .php ^^.
merci pour votre aide !  :jap:


 
Pourquoi t'emmerder avec du PHP pour afficher l'heure en temps réel sur le client ?? Le JavaScript dispose de ce qu'il faut pour gérer le temps. Alors à moins que tu ne veuilles afficher l'heure de ton serveur (donc si ta page est hébergée en France et q'un mec au Japon par exemple affiche ta page, il va se demander pourquoi l'heure est du coup super décalée par rapport à chez lui ;)).
Ensuite ton getElementByID retournerait qqch si ce qqch existait ! Ben oui tu cherches à récuperer un element de la page qui n'existe pas forcément encore.
 
Essayes ca :

Code :
  1. <html>
  2. <head>
  3.     <script type="text/javascript">
  4.         var changeHeure = function ()
  5.             {
  6.                 var jsphp = document.getElementById ('jsphp');
  7.                 if (!jsphp)
  8.                     return false;
  9.  
  10.                 var d = new Date ();
  11.                 jsphp.innerHTML = "il est " + d.getHours () + " heures et " + d.getMinutes () + " minutes et " + d.getSeconds () + " secondes";
  12.                 setTimeout (changeHeure, 1000);
  13.                 return true;
  14.             }
  15.  
  16.         window.onload = changeHeure;
  17.     </script>
  18.  
  19. </head>
  20. <body>
  21.     <div id="jsphp"></div>
  22. </body>
  23. </html>



---------------
We deserve everything that's coming...
Reply

Marsh Posté le 04-06-2009 à 23:16:52    

Yeah, sa marche, merci bien !  :jap:  
Il est vrai de plus que le choix de l'heure du serveur n'était pas vraiment judicieux ...  
...
...
M'énerve quand même, j'aimerais bien savoir comment faire avec le mélange des 2 langage, sa m'aiderais à mieux les manipuler l'un dans l'autre...
Enfin, je te dis merci avant tout ^^
 :hello:


---------------
1000 lasagnes
Reply

Marsh Posté le 04-06-2009 à 23:23:07    

Mélanger ces deux langages n'est pas forcément une bonne idée en soi ! L'un tourne sur un serveur, l'autre sur un client, c'est deux mondes différents :)
Par contre ils se completent bien si celui du coté serveur se charge de retourner des données que celui du coté client client peut alors afficher (les bases de l'Ajax quoi).
Par contre générer en PHP du code JS n'est pas impossible, mais souvent il ne s'agit pas d'une bonne odée, le débogage devient particulierement ... aléatoire.

 

Sinon concernant le code plus haut, on peut faire plus "optimisé" et moins "bouffeur de ram" (je pense) :

Code :
  1. <script type="text/javascript">
  2.         var changeHeure = function ()
  3.             {
  4.                 this.init = function ()
  5.                     {
  6.                         ptr.date = new Date ();
  7.                         ptr.jsphp = document.getElementById ('jsphp');
  8.                         return !!ptr.jsphp;
  9.                     }
  10.  
  11.                 this.show = function ()
  12.                     {
  13.                         ptr.date.setTime (ptr.date.getTime () + ptr.delay);
  14.                         ptr.jsphp.innerHTML = "il est " + ptr.date.getHours () + " heures et " + ptr.date.getMinutes () + " minutes et " + ptr.date.getSeconds () + " secondes";
  15.                         return true;
  16.                     }
  17.  
  18.                 this.delay = 1000;
  19.  
  20.                 var ptr = this;
  21.                 if (ptr.init ())
  22.                     setInterval (ptr.show, ptr.delay);
  23.             }
  24.  
  25.         window.onload = function ()
  26.             {
  27.                 new changeHeure ();
  28.                 return true;
  29.             }
  30.     </script>


Message édité par SICKofitALL le 04-06-2009 à 23:26:21

---------------
We deserve everything that's coming...
Reply

Marsh Posté le 05-06-2009 à 00:26:48    

j'ai déjà vu ce this un peu partout ... Mais je sais tjrs pas ce que c'est !!  :lol:  
Pourrais tu éclairer ma lanterne ?
thanks

Message cité 1 fois

---------------
1000 lasagnes
Reply

Marsh Posté le 05-06-2009 à 00:42:13    

@l Oue$t a écrit :

j'ai déjà vu ce this un peu partout ... Mais je sais tjrs pas ce que c'est !!  :lol:  
Pourrais tu éclairer ma lanterne ?
thanks


C'est trop long à expliquer :/
C'est en relation avec la programmation orientée objet (OOP anglais), même si le JS n'est pas un réellement orienté objet justement.
Mate ca : http://www.sitepoint.com/article/o [...] ramming-1/


---------------
We deserve everything that's coming...
Reply

Sujets relatifs:

Leave a Replay

Make sure you enter the(*)required information where indicate.HTML code is not allowed