Partage

[JS] incrémenter un timestamp avec javascript

12 avril 2007 à 14:23:19

Bonjour je cherche à faire une fonction en JS qui permet d'afficher chaque seconde le nouveau time() PHP.
Je n'y arrive vraiment pas. Quelqu'un pourrait me donner un indice ?

Merci

Andeim

12 avril 2007 à 14:28:26

<HEAD><TITLE>Affichage de l'heure</TITLE>

</HEAD>
<BODY>

<SCRIPT language=javascript>
function Timer() {
var dt=new Date()
window.status=dt.getHours()+":"+dt.getMinutes()+":"+dt.getSeconds();
setTimeout("Timer()",1000);
}
Timer();
</SCRIPT>

autre script
<input type="texte" id="heure" name="heure" value=""/>

<SCRIPT language=javascript>
function Heure() {
var dt=new Date()
//window.status=dt.getHours()+":"+dt.getMinutes()+":"+dt.getSeconds();
document.getElementById("heure").value = dt.getHours()+":"+dt.getMinutes()+":"+dt.getSeconds();
setTimeout("Heure()",1000);
}
Heure();
</SCRIPT>

</BODY>

Voilà tu as deux façon d'afficher l'heure...

Mattamore

12 avril 2007 à 14:35:03

Merci mais ce n'est pas du tout ce que je cherche à faire.
J'ai un programme déjà bien avancé en PHP qui calcule des "temps restants" en fonction d'un timestamp + x en variable et de time(). Pour voir le résultat je dois recharger la page.

J'aimerai donc savoir si JS est capable de récupérer le nouveau timestamp toute les secondes pour pouvoir mettre à jour dynamiquement le résultat.

Andeim

12 avril 2007 à 14:49:57

Avec setTimeout("Nom_Fonction()",Nombre_du_temps); tu peux appeler une fonction tous les Nombre_du_temps qui est un temps en millième de seconde.
C'est ce que tu souhait???

Mattamore

12 avril 2007 à 15:10:39

Le problème c'est que <?php echo time(); ?> n'est pas mis à jour dans la fonction.

Andeim

12 avril 2007 à 15:16:33

J'ai un peu de mal pour mettre du PHP avec du Javascript :euh:

...
Donc pour cela je pourrai pas t'en dire plus. Ou sinon il faudrait que je voie le code pour trouver un moyen de faire autrement. :-°

Mattamore

12 avril 2007 à 15:32:30

Oui heu je vais essayer j'ai des bouts de code dans pas mal de fichiers jvais tenter de recoller ce qui va ensemble alors :

<?php
function sec2hms ($sec) // ma fonction qui convertit les secondes de la soustraction des 2 timestamps en heures / minutes / secondes
{
$hms = "";
$hours = intval(intval($sec) / 3600);
$hms .= str_pad($hours, 2, "0", STR_PAD_LEFT). ':';
$minutes = intval(($sec / 60) % 60);
$hms .= str_pad($minutes, 2, "0", STR_PAD_LEFT). ':';
$seconds = intval($sec % 60);
$hms .= str_pad($seconds, 2, "0", STR_PAD_LEFT);
return $hms;
}

$temps_actuel = time();
$temps_restant_mine = $clients['construction_mine'] - $temps_actuel; // dans l'array est fixé un timestamp + x qui va déterminer le nombre de secondes restantes.

echo '<strong>'.sec2hms($temps_restant_mine).' secondes</strong><br />restantes avant la fin de la construction</center></td>'; // on affiche le résultat en heures minutes secondes et c'est là que je veux mettre mon javascript.

?>

Fieldset

12 avril 2007 à 15:35:22

Il faut concevoir ton script différement.

Tu pourrais comme tu le dis choisir de rafraichir ton "horloge" à chaque secondes en récupérant la nouvelle heure en php. Pour celà il te faudrait utiliser l'objet XMLHTTPRequest qui contacterait une page php dans laquelle tu fais un echo de ton horloge en php.

Le soucis de cette méthode c'est qu'elle risque de faire ramer le client car un rafraichissement chaque secondes c'est pas forcément le plus adapté surtout quand on réflechit un peu et qu'on se dit qu'on peut utiliser une méthode différente que voici :

Les timestamps sous javascript fonctionnent de la même manière qu'en Php la seule différence est que les timestamps ne sont pas exprimé en secondes comme en php mais en milliseconde (mais ce n'est vraiment pas un pb)
Donc lors du chargement de ta page web, tu affiche via un echo le timestamp php que tu refile à Javascript et tu appliques un *1000 (pour rajouter les millisecondes) et ensuite tu ne t'occupes plu d'aller récupérer ce temps chaque secondes via une page php, tu as juste à gérer celà via js avec un settimeout

Tu peux jetter un oeil à ce petit script qui affiche l'heure en direct d'un serveur :

<div id="horloge"></div>
<script>
var dateCourante = new Date(<?php echo time()*1000; ?>);
var horloge = document.getElementById("horloge");
function incrementer()
{
dateCourante.setTime(dateCourante.getTime()+1000);
horloge.innerHTML = "Heure Serveur : "+dateCourante.getDate()+"/"+(dateCourante.getMonth()+1)+"/"+dateCourante.getFullYear()+" - "+dateCourante.getHours()+":"+dateCourante.getMinutes()+":"+dateCourante.getSeconds();
setTimeout(incrementer, 1000);
}
onload = incrementer;
</script>

Andeim

12 avril 2007 à 15:39:33

Ton code ne fonctionne pas sous Internet Explorer...

Fieldset

12 avril 2007 à 15:47:23

Quelle version as-tu essayé ? Car sous IE6 ça marche et sous IE 7 aussi lol

Oublie de foutre tout le code autour... (doctype, head, html et body lol)

Andeim

12 avril 2007 à 15:53:13

Non c'est bon j'ai rien dit (j'avais enregistré sous HTML donc le php n'était pas pris en compte sous IE et sous firefox le temps commençait le 01/01/1970 à 1H00 :-°

)

Fieldset

12 avril 2007 à 16:00:22

lol NON MAIS ! !p

Mattamore

12 avril 2007 à 16:04:05

Merci beaucoup Fieldset je pensais pas qu'on pouvait récupérer un timestamp (ou presque) en JS similaire à celui en PHP. Je vais essayer de faire mon script et si vraiment ça va pas je viendrais me plaindre mais, ça devrait aller.
Merci encore

EDIT :

<?php echo "<div id=\"horloge\"></div>"; ?>

<script>
var dateCourante = new Date(<?php echo time()*1000; ?>);
var horloge = document.getElementById("horloge");
function incrementer()
{
dateCourante.setTime(dateCourante.getTime()+1000);
horloge.innerHTML = <?php echo $clients['construction_mine']; ?> - (dateCourante.getTime()/1000);
setTimeout(incrementer, 1000);
}
onload = incrementer;
</script>

Ca marche j'arrive bien grâce à cette fonction à décrémenter les secondes restantes !
J'ai un autre soucis maintenant, je n'arrive plus à appliquer ma fonction <?php sec2hms($sec); ?> sur la balise div. Surement une erreur de syntaxe, je suis pas habitué a mélanger les genres comme ça.
Une idée ?

Fieldset

12 avril 2007 à 19:55:43

Ben là pareil tu fais ça en js

En fait php te sers uniquemetn à fournir un timestamp brute de ce genre là : 0123456789 et tu fais tout tes traitements via js

Et là tu aura vraiment optimiser ton code car tu n'as pas d'aller et retour à faire entre le serveur et le client

Mattamore

12 avril 2007 à 20:20:34

Merci beaucoup mais je suis clairement mauvais en JS...
Serait-ce possible de passer dans une variable PHP le résultat d'une variable JS ? (ça fait une heure que j'essaye sans succès).

Si vraiment on peut pas, pourriez vous m'aider à réécrire ma fonction "secondes vers heures/minutes/secondes" en javascript ?

Merci d'avance

Fieldset

12 avril 2007 à 20:58:59

Depuis tout à l'heure je boss sur ton script je t'ai fait un super truc

je le fignole et je te montre

je suis sur que ça va coller avec ce que tu cherches à faire

EDIT:
Ya surement moyen de l'améliorer largement :s

Mattamore

13 avril 2007 à 1:22:02

Ooooooooooooooh merci 1000x je vais vite tenter de l'appliquer à mes scripts !!

Merci !!!!!!!!!

EDIT : Vous avez pensé à tout, même au lien pour construire à la fin du décompte, c'est super, exactement ce que je voulais !

EDIT2 : Voilà le script est bien appliqué et tout fonctionne parfaitement. Je voulais savoir si il était également possible en JS de mettre des 0 devant les chiffres seuls pour qu'ils soient toujours par paire, comme le fait ma fonction sec2hms() en PHP.

EDIT3 : Il y a un petit bug aussi, au dessus de 24 heures de construction il compte un jour sans le marquer et me soustrait 24 heures aux heures restantes, je vais essayer de le corriger moi même.

J'ai également une autre petite question, est-il possible de charger une page automatiquement, à la place de placer le lien "construire" une fois le décompte terminé ?

encore merci

Fieldset

13 avril 2007 à 13:11:44

Hihi de rien mais comme je l'ai dit il y a surement moyen d'améliorer ce script j'essayerais de faire ça ce soir si je peux

Concernant la redirection penses-tu que c'est une bonne idée si jamais tu as plusieurs constrcutions qui sont disponibles en même temps ? A toi de voir

Sinon oui je pense que c'est possible de rediriger. Il doit même être possible d'ouvrir une popup ou quelque chose dans ce genre

Pour les 0 devant les chiffres une simple condition est nécessaire :

if (bidule.getTime() < 10)
temps = "0"+bidule.getTime();
else
temps = bidule.getTime();

Ou avec une condition "ternaire" :

var h = (dateCourante.getHours() < 10) ? '0'+dateCourante.getHours() : dateCourante.getHours();
var m = (dateCourante.getMinutes() < 10) ? '0'+dateCourante.getMinutes() : dateCourante.getMinutes();
var s = (dateCourante.getSeconds() < 10) ? '0'+dateCourante.getSeconds() : dateCourante.getSeconds();
divHorloge.innerHTML = "Heure : "+h+":"+m+":"+s;

Pourle bug des heures oui je crois qu'il y a un soucis mais j'ai fait ça hier soir j'avais plus l'esprit très claire.

Là encore tu fais une condition : si les heures sont superieur à 24 tu récupère le nombre de jours en faisant : nombre_dheures / 24 = nombres de jours, et pour récupérer les heures restantes tu fais : nombre_dheurs % 24 = heures restantes

Mattamore

13 avril 2007 à 20:28:08

Merci pour les conseils.
Malheureusement cette fois je sèche, je n'arrive pas a rajouter ces 0 dans le scriptet pour le coup des 24 heures, encore moins

Va sérieusement falloir qu'je me mette au javascript

Fieldset

17 avril 2007 à 15:21:43

Bon j'ai corrigé certains trucs car il y avait pas mal de pbs mdr

<!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></title>
</head>
<body>

<div id="champ1" style="border: 1px solid red; height: 30px;">
</div>

<div id="champ2" style="border: 1px solid red; height: 30px;">
</div>

<script>
function decompte(timestamp, link, div)
{
var div = document.getElementById(div);
var tsActuel = <?php echo time(); ?>;

var SECONDE = 1;
var MINUTE = 60*SECONDE;
var HEURE = 60*MINUTE;
var JOUR = 24*HEURE;

this.decremente = function()
{
var tsRestant = timestamp - tsActuel;
if (tsRestant > 0)
{
tsActuel++;

var j = ((parseInt(tsRestant / JOUR) < 10) ? "0"+parseInt(tsRestant / JOUR) : parseInt(tsRestant / JOUR));
var h = ((parseInt((tsRestant % JOUR) / HEURE) < 10) ? "0"+parseInt((tsRestant % JOUR) / HEURE) : parseInt((tsRestant % JOUR) / HEURE));
var m = ((parseInt(((tsRestant % JOUR) % HEURE) / MINUTE) < 10) ? "0"+parseInt(((tsRestant % JOUR) % HEURE) / MINUTE) : parseInt(((tsRestant % JOUR) % HEURE) / MINUTE));
var s = ((parseInt((((tsRestant % JOUR) % HEURE) % MINUTE) / SECONDE) < 10) ? "0"+parseInt((((tsRestant % JOUR) % HEURE) % MINUTE) / SECONDE) : parseInt((((tsRestant % JOUR) % HEURE) % MINUTE) / SECONDE));

div.innerHTML = j+"Jour(s) "+h+"h"+m+"m"+s+"s";
}
else
{
div.innerHTML = '<a href="'+link+'">Construire</a>';
}
}
}

var decompte1 = new decompte(<?php echo time();?>+65, "#", "champ1");
var decompte2 = new decompte(<?php echo time(); ?>+30, "#", "champ2");

function refresh()
{
decompte1.decremente();
decompte2.decremente();
setTimeout(refresh, 1000);
}

window.onload = refresh;
</script>

</body>
</html>

Fieldset

22 avril 2007 à 17:46:27

Tu réponds quand tu veux lol...

Mattamore

25 avril 2007 à 17:29:27

Excuse moi Fieldset je pensais que tu m'avais oublié j'avais donc laissé un peu ce topic de coté.
Quelle bonne surprise j'ai là je vais tout de suite voir si ça marche

Merci beaucoup

Fieldset

25 avril 2007 à 22:15:07

je m'en doutais c'est pour ça que j'ai "uppé" lol

Mattamore

25 avril 2007 à 22:44:25

Ca marche impec, la seule chose que j'ai trouvée bizarre c'est que le <div id=></div> devait impérativement être audessus du script, contrairement au script précédent ou ça marchait si il était placé au dessous.

Sinon vous avez bien éclairci votre code, ça m'a aidé à bien comprendre, et tout marche très bien

Merci encore pour toute l'aide que vous m'avez apporté.
A bientôt sur d'autre topics