01net    Web


Actuellement en ligne : 1226 Utilisateurs dont 56 dans Programmation et développement >S'inscrire      >S'identifier      >Recherche      >Aide  
modéré par A.Ouloube, Beno@  
01net > Forum de 01net > Programmation et développement > HTML / Javascript
> [resolu] Aide .js
Auteur
Message
 
<     1       >
Arom'
  
   
      ?   @     Posté le 29/07/2007 12:09:26  
Voter pour ce message
bonjour,

Voilà mon pb

je rencontre un souci sur un .js
but => compte à rebours et à l'arrêt affichage d'un hyperlien.

comme mon js laisse franchement à désirer et que donc "le script n'est pas de moi", je plante...

voilà le code:


var Seconds_Counter = 86400;
var URL_Redirection_Counter = "chemin_page";
var Text_Redirection_Counter = "texte lien";
var Target_Redirection_Counter = "_blank";

var Target_Counter = document.getElementById('Counter');
var Target_Time_Counter = new Date();
var Time_Beginn_Counter = Target_Time_Counter.getTime();
var Time_End_Counter = Time_Beginn_Counter + (Seconds_Counter*1000);
Target_Time_Counter.setTime(Time_End_Counter);

var Day_Counter = Target_Time_Counter.getDate();
var Month_Counter = Target_Time_Counter.getMonth() + 1;
var Year_Counter = Target_Time_Counter.getYear();
if(Year_Counter < 999) Year_Counter += 1900;
var h_Counter = Target_Time_Counter.getHours();
var m_Counter = Target_Time_Counter.getMinutes();
var s_Counter = Target_Time_Counter.getSeconds();

var fday_Counter = ((Day_Counter < 10) ? "0" : "") + Day_Counter + "/";
var fmonth_Counter = ((Month_Counter < 10) ? "0" : "") + Month_Counter + "/";
var fyear_Counter = Year_Counter
var fh_Counter = ((h_Counter < 10) ? "0" : "") + h_Counter + "h ";
var fm_Counter = ((m_Counter < 10) ? "0" : "") + m_Counter + "min ";
var fs_Counter = ((s_Counter < 10) ? "0" : "") + s_Counter + "sec";

var End_Date_Counter = fday_Counter + fmonth_Counter + fyear_Counter;
var End_Time_Counter = fh_Counter + fm_Counter + fs_Counter;

CountDown_Counter();

function CountDown_Counter() {
var Current_Date_Counter = new Date();
var Curren_tTime_Counter = Current_Date_Counter.getTime()
var Open_Time_Counter = Math.floor((Target_Time_Counter-Curren_tTime_Counter)/1000);

var s_Counter = Open_Time_Counter % 60;
var m_Counter = ((Open_Time_Counter-s_Counter)/60) % 60;
var h_Counter = ((Open_Time_Counter-s_Counter-m_Counter*60)/(60*60));
var fh_Counter = ((h_Counter < 10) ? "0" : "") + h_Counter + "h ";
var fm_Counter = ((m_Counter < 10) ? "0" : "") + m_Counter + "min ";
var fs_Counter = ((s_Counter < 10) ? "0" : "") + s_Counter + "sec";

var Time_Counter = fh_Counter + fm_Counter + fs_Counter;
var Output_String_Counter=Time_Counter;

if(Open_Time_Counter<=0) {
Target_Counter.innerHTML= "<a href='" + URL_Redirection_Counter + "' target='" + Target_Redirection_Counter + "'>" + Text_Redirection_Counter + "</a>";
}else{
Target_Counter.innerHTML= " texte " + End_Date_Counter + " texte " + End_Time_Counter+ " texte " + Output_String_Counter;
window.setTimeout("CountDown_Counter()",1000);
}
}


le script fonctionne parfaitement à un détails près
=> lors d'un refresh le compteur repart comme neuf avec
Code:
var Seconds_Counter



1) si le code à besoin d'être nettoyé du superflu, je suis preneur !
2) comment contrer/supp cette initialisation ? ça doit être bête comme chou...
3) je demande pas une correction toute faite sans rien comprendre...

merci d'avance
Arom'
-->Message édité par Arom' le 04/08/2007 14:23:20<--
D3bug
  Mouais...
  :-)
      ?   @     Posté le 29/07/2007 13:21:10  
Voter pour ce message
Sympa ça, j'y jette un oeil et j'édite :].
-------
E6850 @ 3.6Ghz (stock, 9x400) / GA-P35-DS3 / Asus 8800GTX @ 600/1000 / Crucial Ballistix 4-4-4-12 @ 400, 1:1
D3bug
  Mouais...
  :-)
      ?   @     Posté le 29/07/2007 13:46:06  
Voter pour ce message
Voila quelques corrections avec commentaires, j'ai pas le temps de tester ou de faire plus pour l'instant !


/*incrémentation en secondes (ici une journée complète)*/
var Seconds_Counter = 86400;

/*Variables utilisées en construction de liens */
var URL_Redirection_Counter = "chemin_page";
var Text_Redirection_Counter = "texte lien";
var Target_Redirection_Counter = "_blank";

/*zone html qui va afficher le compteur*/
var Target_Counter = document.getElementById('Counter');

var Target_Time_Counter = new Date(); // date au 01 janvier 70
var Time_Beginn_Counter = Target_Time_Counter.getTime(); // nb de millisecondes écoulées depuis cette date
var Time_End_Counter = Time_Beginn_Counter + (Seconds_Counter*1000); //ci-dessus + incrémentation en millisecondes.

Target_Time_Counter.setTime(Time_End_Counter); // date d'aujourd'hui + ajout en m.s. du compteur.

// On définit le jour, mois, et année du compteur à l'arrivée
var Day_Counter = Target_Time_Counter.getDate();
var Month_Counter = Target_Time_Counter.getMonth() + 1;
var Year_Counter = Target_Time_Counter.getYear();
// je pense qu'ici on peut remplacer par +=2000 (vu qu'on est en 2007 et que Target_Time_Counter se base sur aujourd'hui).
if(Year_Counter < 999) Year_Counter += 1900;

// Cette fois on définit heure d'arrivée, minute, seconde
var h_Counter = Target_Time_Counter.getHours();
var m_Counter = Target_Time_Counter.getMinutes();
var s_Counter = Target_Time_Counter.getSeconds();

// ici on utilise un "if" plus court (me souviens plus du nom...:))
// Exemple: Si Day_Counter < 10 alors on a le caractère "0" sinon on a rien "" .
// Cela permettra d'afficher 01, 02, etc dans la date du jour, idem pour le reste, c'est histoire de formater correctement les dates.

var fday_Counter = ((Day_Counter < 10) ? "0" : "") + Day_Counter + "/";
var fmonth_Counter = ((Month_Counter < 10) ? "0" : "") + Month_Counter + "/";
var fyear_Counter = Year_Counter
var fh_Counter = ((h_Counter < 10) ? "0" : "") + h_Counter + "h ";
var fm_Counter = ((m_Counter < 10) ? "0" : "") + m_Counter + "min ";
var fs_Counter = ((s_Counter < 10) ? "0" : "") + s_Counter + "sec";

// On affiche la chaine de caracteres (string) complète pour jour + mois + année, et pour heures + minutes + secondes
var End_Date_Counter = fday_Counter + fmonth_Counter + fyear_Counter;
var End_Time_Counter = fh_Counter + fm_Counter + fs_Counter;

// Tout ça dans le but de préparer ta "date limite" basée sur Target_Time_Counter

//Curieusement ici il n'a pas passé cette date limite en argument, je la rajoute, ça me parait plus cohérent...
CountDown_Counter(Target_Time_Counter);

function CountDown_Counter(tadatelimite) {

var Current_Date_Counter = new Date();// date au 01 janvier 70
// Note qu'ici il te manquait un ";" a ton Curren_tTime_Counter à la fin...que je rajoute
var Curren_tTime_Counter = Current_Date_Counter.getTime(); // nb de millisecondes écoulées depuis cette date

// Math.Floor() renvoie l'entier le plus proche du résultat de l'opération (ici une soustraction entre la date limite et le nb de ms écoulées en cet instant depuis 70).
// Le résultat est donc positif, tant que la date d'aujourd'hui n'a pas atteint la date limite --> on relance le compteur toutes les secondes (cf dernier if).

var Open_Time_Counter = Math.floor((tadatelimite-Curren_tTime_Counter)/1000);

// du blabla de formatage à afficher dans l'html à la fin
var s_Counter = Open_Time_Counter % 60;
var m_Counter = ((Open_Time_Counter-s_Counter)/60) % 60;
var h_Counter = ((Open_Time_Counter-s_Counter-m_Counter*60)/(60*60));
var fh_Counter = ((h_Counter < 10) ? "0" : "") + h_Counter + "h ";
var fm_Counter = ((m_Counter < 10) ? "0" : "") + m_Counter + "min ";
var fs_Counter = ((s_Counter < 10) ? "0" : "") + s_Counter + "sec";

var Time_Counter = fh_Counter + fm_Counter + fs_Counter;
var Output_String_Counter=Time_Counter;

if(Open_Time_Counter<=0) {
Target_Counter.innerHTML= "<a href='" + URL_Redirection_Counter + "' target='" + Target_Redirection_Counter + "'>" + Text_Redirection_Counter + "</a>";
}else{
Target_Counter.innerHTML= " texte " + End_Date_Counter + " texte " + End_Time_Counter+ " texte " + Output_String_Counter;
// Correction avec ajout de l'argument date_limite évalué plus haut
window.setTimeout("CountDown_Counter(Target_Time_Counter)",1000);
}
}
-------
E6850 @ 3.6Ghz (stock, 9x400) / GA-P35-DS3 / Asus 8800GTX @ 600/1000 / Crucial Ballistix 4-4-4-12 @ 400, 1:1
Arom'
  
   
      ?   @     Posté le 29/07/2007 16:35:47  
Voter pour ce message
Tout d'abord, MERCI D3bug
pour se décorticage avec /*comm*/
c'est beaucoup plus clair comme ça !


TOUT OK sauf pour +=2000
[si +=2000 change de millénaire donc + 1 siècle qui affiche 2107]


mais tout ça ne résoud pas mon pb
à savoir
le script fonctionne parfaitement à un détails près
=> lors d'un refresh le compteur repart comme neuf avec
var Seconds_Counter



encore une fois merci.
Comment ne pas réinitialiser le compteur lors d'un refresh de page ?

merci d'avance
Arom'
D3bug
  Mouais...
  :-)
      ?   @     Posté le 29/07/2007 17:41:44  
Voter pour ce message
Oui oui hein c'est pas finit lol...c'est histoire d'éclaircir, là je n'ai vraiment pas le temps de suite ;).
Pour le "Target_Time_Counter.getYear()", si c'est inférieur à 999 je pensais que ça allait renvoyer un truc du genre 85, 90 etc, je ne m'attendais pas a des "centaines" (pour moi une année, c'est "1980" ou "80", et comme on a passé l'an 2000...j'ai pensé que le code avait été fait avant ;), maintenant faut foir le résultat d'un getYear() effectivement :p).

Je code en c# habituellement et pour éviter le problème du rafraichissement on aurait une condition du type if(!Page.IsPostBack){on crée la variable, puis on la stocke (cache ou autre)} , j'ignore en .js ce qu'on a comme équivalent, là c'est dans l'but de te donner une piste. J'y rejetterai un oeil ce soir ou demain!

[edito rapide: ceci dit t'as essayé voir ce que ça donnait avec le passage en argument de la date limite dans la fonction du compteur?]
-->Message édité par D3bug le 29/07/2007 17:42:25<--
-------
E6850 @ 3.6Ghz (stock, 9x400) / GA-P35-DS3 / Asus 8800GTX @ 600/1000 / Crucial Ballistix 4-4-4-12 @ 400, 1:1
Arom'
  
   
      ?   @     Posté le 29/07/2007 17:55:35  
Voter pour ce message
tout pareil, no bug sauf tjs & encore ce refresh
-->Message édité par Arom' le 29/07/2007 17:57:14<--
Arom'
  
   
      ?   @     Posté le 29/07/2007 18:16:05  
Voter pour ce message
Si 1 dev cro$oft &/ou GG passe par là, la demande est réalisable :hello:

en fait ce qu'il me faut,

1) c'est 1 compte à rebours
2) end compte => affichage d'un hyperlien :whistle:
dans n'importe quel langage [évitez qd mm le chinois]

=> je sors
arom'
-->Message édité par Arom' le 29/07/2007 18:20:16<--
D3bug
  Mouais...
  :-)
      ?   @     Posté le 01/08/2007 19:47:18  
Voter pour ce message
Salut Arom, voila ce que j'ai eu le temps de faire rapidos:


<script language="JavaScript">

/*Variables utilisées en construction de liens */
var URL_Redirection_Counter = "chemin_page";
var Text_Redirection_Counter = "texte lien";
var Target_Redirection_Counter = "_blank";
/*zone html qui va afficher le compteur*/
var Target_Counter = document.getElementById('Counter');


function chkRefresh()
{
if( document.refreshForm.visited.value == "" )
{
// La page a été rafraichie
document.refreshForm.visited.value = "1";

/*incrémentation en secondes (ici une journée complète)*/
var Seconds_Counter = 86400;

var Target_Time_Counter = new Date(); // date au 01 janvier 70
var Time_Beginn_Counter = Target_Time_Counter.getTime(); // nb de millisecondes écoulées depuis cette date
var Time_End_Counter = Time_Beginn_Counter + (Seconds_Counter*1000); //ci-dessus + incrémentation en millis.

Target_Time_Counter.setTime(Time_End_Counter); // date d'aujourd'hui + ajout en m.s. du compteur.

// On définit le jour, mois, et année du compteur à l'arrivée
var Day_Counter = Target_Time_Counter.getDate();
var Month_Counter = Target_Time_Counter.getMonth() + 1;
var Year_Counter = Target_Time_Counter.getYear();
// je pense qu'ici on peut remplacer par +=2000 (vu qu'on est en 2007 et que Target_Time_Counter se base sur aujourd'hui).
if(Year_Counter < 999) Year_Counter += 1900;

// Cette fois on définit heure d'arrivée, minute, seconde
var h_Counter = Target_Time_Counter.getHours();
var m_Counter = Target_Time_Counter.getMinutes();
var s_Counter = Target_Time_Counter.getSeconds();

// ici on utilise un "if" plus court (me souviens plus du nom...:))
// Exemple: Si Day_Counter < 10 alors on a le caractère "0" sinon on a rien "" .
// Cela permettra d'afficher 01, 02, etc dans la date du jour, idem pour le reste, c'est histoire de formater correctement les dates.
var fday_Counter = ((Day_Counter < 10) ? "0" : "") + Day_Counter + "/";
var fmonth_Counter = ((Month_Counter < 10) ? "0" : "") + Month_Counter + "/";
var fyear_Counter = Year_Counter
var fh_Counter = ((h_Counter < 10) ? "0" : "") + h_Counter + "h ";
var fm_Counter = ((m_Counter < 10) ? "0" : "") + m_Counter + "min ";
var fs_Counter = ((s_Counter < 10) ? "0" : "") + s_Counter + "sec";

// On affiche la chaine de caracteres (string) complète pour jour + mois + année, et pour heures + minutes + secondes
var End_Date_Counter = fday_Counter + fmonth_Counter + fyear_Counter;
var End_Time_Counter = fh_Counter + fm_Counter + fs_Counter;

// Tout ça dans le but de préparer ta "date limite" basée sur Target_Time_Counter

//Curieusement ici il n'a pas passé cette date limite en argument, je la rajoute, ça me parait plus cohérent...
CountDown_Counter(Target_Time_Counter);

// On ajoute le tout premier code
// on met en cache Target_Time_Counter ou on la passe en parametre url
}
else
{
//La page a été rafraichie, on re-utilise code precedent dont on a besoin
// on recupere la valeur du cache ou du parametre url

}
}

function CountDown_Counter(tadatelimite) {

var Current_Date_Counter = new Date();// date au 01 janvier 70
// Note qu'ici il te manquait un ";" a ton Curren_tTime_Counter à la fin...que je rajoute
var Curren_tTime_Counter = Current_Date_Counter.getTime(); // nb de millisecondes écoulées depuis cette date

// Math.Floor() renvoie l'entier le plus proche du résultat de l'opération (ici une soustraction entre la date limite et le nb de ms écoulées en cet instant depuis 70).
// C'est donc positif, tant que la date d'aujourd'hui n'a pas atteint la date limite --> on relance le compteur toutes les secondes (cf dernier if).
var Open_Time_Counter = Math.floor((tadatelimite-Curren_tTime_Counter)/1000);

// du blabla de formatage à afficher dans l'html à la fin
var s_Counter = Open_Time_Counter % 60;
var m_Counter = ((Open_Time_Counter-s_Counter)/60) % 60;
var h_Counter = ((Open_Time_Counter-s_Counter-m_Counter*60)/(60*60));
var fh_Counter = ((h_Counter < 10) ? "0" : "") + h_Counter + "h ";
var fm_Counter = ((m_Counter < 10) ? "0" : "") + m_Counter + "min ";
var fs_Counter = ((s_Counter < 10) ? "0" : "") + s_Counter + "sec";

var Time_Counter = fh_Counter + fm_Counter + fs_Counter;
var Output_String_Counter=Time_Counter;

if(Open_Time_Counter<=0) {
Target_Counter.innerHTML= "<a href='" + URL_Redirection_Counter + "' target='" + Target_Redirection_Counter + "'>" + Text_Redirection_Counter + "</a>";
}else{
Target_Counter.innerHTML= " texte " + End_Date_Counter + " texte " + End_Time_Counter+ " texte " + Output_String_Counter;
// Correction avec ajout de l'argument date_limite évalué plus haut
window.setTimeout("CountDown_Counter(Target_Time_Counter)",1000);
}
}
</script>
</head>

<body onLoad="JavaScript:chkRefresh();">

<form name="refreshForm">
<input type="hidden" name="visited" value="" />
</form>

</body>


On utilise une forme cachée que l'on met dans le body de la page afin de savoir si la page est rafraichie ou non. Reste juste à mettre en mémoire le Time_End_Counter afin de savoir quand est ce qu'on a voulu que le compteur s'arrête au tout premier chargement de la page. J'sais pas encore comment je ferai ça, si on peut mettre en cache en javascript directement ou si j'me servirai d'un cookie, on verra ;) (je fais ça suivant dispo' limitée!).
-------
E6850 @ 3.6Ghz (stock, 9x400) / GA-P35-DS3 / Asus 8800GTX @ 600/1000 / Crucial Ballistix 4-4-4-12 @ 400, 1:1
Arom'
  
   
      ?   @     Posté le 02/08/2007 03:03:34  
Voter pour ce message
Salut D3bug
encore merci de te pencher sur mon pb...

je sais pas si dans ta proposition de solution le résultat s'apparente à ma requête ?

je ne veux pas un décompte x temps unique pour chaque visiteur arrivant mais plutôt un décompte général unique (par script) à charger sur serveur qui affichera le dit décompte (même décompte pour tous)...

exemple:
il reste 18jrs 22H 10mn et 41s avant évènement...
il reste 18jrs 22H 10mn et 40s avant évènement...
il reste 18jrs 22H 10mn et 39s avant évènement...

Un compte à rebours unique sur un site qui annonce jrs H mn et s avant évènement.
Et à 0jrs 0H 0mn et 0s > affichage d'un lien

Ce "compte à rebours" est l'eau de mon moulin,
sans lui il n'y a plus de projet ;)

Espérant avoir été assez précis.


D3bug
  Mouais...
  :-)
      ?   @     Posté le 02/08/2007 18:39:36  
Voter pour ce message
De rien. Ah oui effectivement je n'avais pas tout à fait saisi ça, d'aprés le code je pensais que c'était par utilisateur -> 1ere connexion, compte à rebour d'un jour...pas tout à fait ça. Je rentre ce w-e chez moi, plus de temps aprés coup, ++.
-------
E6850 @ 3.6Ghz (stock, 9x400) / GA-P35-DS3 / Asus 8800GTX @ 600/1000 / Crucial Ballistix 4-4-4-12 @ 400, 1:1
D3bug
  Mouais...
  :-)
      ?   @     Posté le 03/08/2007 22:08:02  
Voter pour ce message
Hop, le re...un peu crevé de la route mais j'ai eu le temps de repenser un peu à ton problème *déballe sa vie*.
Ton problème justement, c'est ça, l'initialisation de ta date cible:
var Seconds_Counter = 86400;
var Target_Time_Counter = new Date();
var Time_Beginn_Counter = Target_Time_Counter.getTime();
var Time_End_Counter = Time_Beginn_Counter + (Seconds_Counter*1000);
Target_Time_Counter.setTime(Time_End_Counter);


Tu la donnes en "ajoutant une durée, une période" par rapport au getTime, ce qui fait qu'elle bouge à chaque fois qu'on initialise à nouveau...hors toi, tu veux une date fixe à un instant "t" nan ? Donc, il te faut remplacer le bloc au dessus par:

var Target_Time_Counter = new Date("05 August, 2007");


ou tu remplaces ""05 August, 2007"" par ta date finale souhaitée. Comme ça tu as une date limite fixe, et quel que soit le rafraichissement que tes utilisateurs feront, le calcul se fera par rapport à cette limite "fixe". Tu dois bien avoir une idée de quand exactement tu veux que se termine ce compteur non ;)? Par ailleurs il doit y avoir plusieurs formats de date possible pour cette fonction Date(), je te laisse le soin de regarder ça. En espèrant que ça t'aide un peu grmblll...
-->Message édité par D3bug le 03/08/2007 22:27:42<--
-------
E6850 @ 3.6Ghz (stock, 9x400) / GA-P35-DS3 / Asus 8800GTX @ 600/1000 / Crucial Ballistix 4-4-4-12 @ 400, 1:1
Arom'
  
   
      ?   @     Posté le 04/08/2007 14:22:47  
Voter pour ce message
Alors là, D3bug,
...tellement simple que je n'y avait même pas pensé... :/
voilà pour toi...

< inclued picture >



Un projet ludique va enfin voir le jour...

...tout ça pour un
var Target_Time_Counter = new Date("15 August, 2007");


Pourquoi on se complique la tête avec des trucs pas possible... A méditer

UN GRAND MERCI A TOI D3bug POUR TA LUMIERE, l'eau va pouvoir coulé et alimenter le moulin !!!

Arom'
D3bug
  Mouais...
  :-)
      ?   @     Posté le 04/08/2007 20:52:55  
Voter pour ce message
:super: :super: Victoire! :super: :super:
Bonne chance pour le projet ;).
-------
E6850 @ 3.6Ghz (stock, 9x400) / GA-P35-DS3 / Asus 8800GTX @ 600/1000 / Crucial Ballistix 4-4-4-12 @ 400, 1:1
<     1       >

01net > Forum de 01net > Programmation et développement > HTML / Javascript
> [resolu] Aide .js

Aller à :

Page générée en : 0.568s - X2board 2.2

Nous contacter | Charte de confiance | Voir notice légale

Tous droits réservés © 1999 - 2008 Groupe Tests - 01net.


Sites du réseau 01net Network : 01net - 01men - Rmc.fr - Bfmtv.fr - Radiobfm.com - TousLesPodcasts - Micro Achat

Mondial de l'automobile 
Le Peugeot Prologue dévoilé en avant-première ! Le SUV compact de Peugeot arrive enfin ! 
C'est vous qui le dites
Chaque jour, la rédaction Entreprise met en avant vos commentaires les plus pertinents