Compte à rebours avec lien de redirection quand il est fini

Soyez le premier à donner votre avis sur cette source.

Snippet vu 24 770 fois - Téléchargée 24 fois

Contenu du snippet

C'est un compte a rebours (encore un) qui permet d'afficher un lien quand il se termine.
A la base, il servais a un compte a rebours sur plusieurs années,

il y a 4 variables a modifier en debut de code:
Seconds_Counter : correspond a la durée du compte à rebours en secondes
Text_Redirection_Counter : correspond au texte du lien
URL_Redirection_Counter : correspond au chemin du lien vers lequel le texte doit pointer
Target_Redirection_Counter : correspond au type de target du lien , cad "_blank", "_self", "_parent" ou "_top"

la variable Open_Time_Counter renvoie le temps restant au format hh:mm:ss ( hh pouvant etre superieur a 24 )
les variables End_Date_Counter et End_Time_Counter renvoient respectivement la date (dd/mm/yyyy) et l'heure (hh:mm:ss) de fin de compte a rebours

Source / Exemple :


<body >

<DIV ID="Counter"></DIV>

<SCRIPT type="text/javascript">
	var Seconds_Counter = 10000; // indiquez la durée du compte à rebours en secondes
	var URL_Redirection_Counter = "index.html"; // indiquez le chemin du lien vers lequel le texte doit pointer
	var Text_Redirection_Counter = "Le compte a rebours est maintenat terminé. Ce lien permet d'aller a index.html"; // indiquez le texte du lien
	var Target_Redirection_Counter = "_top"; // indiquez le type de target : "_blank", "_parent", "_self" ou "_top"  

	//les autres variables n'ont pas a etre modifiées//

	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);

// variables inutilisée ds ce code, servant a un compte a rebours sur plusieurs années

	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= "Le compte a rebours se finira le " + End_Date_Counter + " à " + End_Time_Counter+ ", c'est a dire dans " + Output_String_Counter; 
	  window.setTimeout("CountDown_Counter()",1000);
	  }

	}
	</SCRIPT>

</body>

Conclusion :


si vous avez des idées pour le simplifier ......
enfin, en esperant que cela vous plaise
merci

A voir également

Ajouter un commentaire

Commentaires

The_magicien
Messages postés
72
Date d'inscription
mardi 5 juillet 2005
Statut
Membre
Dernière intervention
8 février 2009
-
Salut, une bonne source, mais je crois que tu peux sûrement faire plus simple (je pourrais pas t'en dire plus car je ne suis pas un expert en javascript. Perso, je ferais ça en PHP, mais bon après c'est comme chacun veut!).
Sinon, je trouve que tu pourrais faire une redirection au lieu d'indiquer un lien, voila!!!

@++
econs
Messages postés
4030
Date d'inscription
mardi 13 mai 2003
Statut
Modérateur
Dernière intervention
23 décembre 2008
18 -
En PHP, tu serais obligé de faire des appels au server toutes les secondes pour rafraîchir la page.
L'intérêt du Javascript, c'est que c'est exécuté côté client, donc la page est appelée une seule fois.
The_magicien
Messages postés
72
Date d'inscription
mardi 5 juillet 2005
Statut
Membre
Dernière intervention
8 février 2009
-
Oui d'accord, mais le problème du javascript, comme il est du côté client, si la date et / ou l'heure est mal règlée chez le visiteur, le code est faussé et ne présente plus aucun intérêt...
franco_se
Messages postés
151
Date d'inscription
samedi 1 novembre 2003
Statut
Membre
Dernière intervention
30 juillet 2018
-
perso, à la base, je calculais le nombre de seconde en utilisant la fonction PHP time() (qui renvoie le timestamp UNIX en seconde ) .
par exemple, si l'on veut qu'un membre attende 20sec, j'enregistre le time() ds ma base de donnée lorsque le membre arrive la 1ere fois su la page , puis j'utilise un code du style
$tps_sec = $time_bdd - time()
cela evite d'avoir des pb ac les temps coté client ou seveur
xloadx
Messages postés
28
Date d'inscription
samedi 15 mai 2004
Statut
Membre
Dernière intervention
10 septembre 2011
-
Plus simple, plus direct, pour les débutants:

http://www.javascriptfr.com/code.aspx?ID=42289

Vous n'êtes pas encore membre ?

inscrivez-vous, c'est gratuit et ça prend moins d'une minute !

Les membres obtiennent plus de réponses que les utilisateurs anonymes.

Le fait d'être membre vous permet d'avoir un suivi détaillé de vos demandes et codes sources.

Le fait d'être membre vous permet d'avoir des options supplémentaires.