Compte à rebours

[Dany]

Code fonctionnel actuel:

Code:

 <style>
#countdownContainer{
width:100%;
text-align:center;
margin-bottom:12px;
}
#countdownContainer p{
color:#FF4F00;
font-weight: bold;
font-size: 15px;
letter-spacing: 0.3em;
}
#countdownContainer div#countdown {
font-size: 15px;
    text-align: center;font-weight: bold;
    border:3px solid #E09019;
    border-radius:10px;
    -webkit-border-radius:10px;
    -moz-border-radius:10px;
padding: 3px 0 5px;
color:#4E5359;
}
#countdownContainer a#link_event{
color: #E84B60;
font-size:13px;
}
#countdownContainer a#link_event:hover{
color:#fff;
}
</style>
<div onload="function compte_a_rebours()" id="countdownContainer">
                                                                                    
   <p>
                                                Anniversaire Frenchnerd                                       
   </p>
                                                                                      
   <div id="countdown">
                                                               
   </div><a href="http://www.frenchnerd-fanclub.com/t8061-cadeau-pour-frenchnerd-les-6-ans-de-frenchnerd" id="link_event">• en savoir plus •</a>
</div>
 <script type="text/javascript">
function compte_a_rebours()
{
 var compte_a_rebours = document.getElementById("countdown");

 var date_actuelle = new Date();
 var date_evenement = new Date("Dec 9 00:00:00 2014");
 var total_secondes = (date_evenement - date_actuelle) / 1000;

 var prefixe = "Compte à rebours terminé dans ";
 
    if (total_secondes > 0)
  {
      var jours = Math.floor(total_secondes / (60 * 60 * 24));
      var heures = Math.floor((total_secondes - (jours * 60 * 60 * 24)) / (60 * 60));
      minutes = Math.floor((total_secondes - ((jours * 60 * 60 * 24 + heures * 60 * 60))) / 60);
      secondes = Math.floor(total_secondes - ((jours * 60 * 60 * 24 + heures * 60 * 60 + minutes * 60)));

      var mot_jour = "J : ";
      var mot_heure = "H : ";
      var mot_minute = "M : ";
      var mot_seconde = "S";
if (secondes<10){secondes="0"+secondes}
if (minutes<10){minutes="0"+minutes}
if (heures<10){heures="0"+heures}
if (jours<10){jours="0"+jours}
          compte_a_rebours.innerHTML = jours + mot_jour + heures + mot_heure + minutes + mot_minute + secondes + mot_seconde;
 }
 else
 {
 compte_a_rebours.innerHTML = 'Compte à rebours terminé.';
 }

 var actualisation = setTimeout("compte_a_rebours();", 1000);
}
compte_a_rebours();
</script> 


Code avec affichage sur 3 compteur uniquement:

Code:

 <style>
#countdownContainer{
width:100%;
text-align:center;
margin-bottom:12px;
}
#countdownContainer p{
color:#FF4F00;
font-weight: bold;
font-size: 15px;
letter-spacing: 0.3em;
}
#countdownContainer div#countdown {
font-size: 15px;
    text-align: center;font-weight: bold;
    border:3px solid #E09019;
    border-radius:10px;
    -webkit-border-radius:10px;
    -moz-border-radius:10px;
padding: 3px 0 5px;
color:#4E5359;
}
#countdownContainer a#link_event{
color: #E84B60;
font-size:13px;
}
#countdownContainer a#link_event:hover{
color:#fff;
}
</style>
<div id="countdownContainer" onload="function compte_a_rebours()">
                                                                           
   <p>
                                         ANNIVERSAIRE FRENCHNERD                                  
   </p>
                                                                         
   <div id="countdown">
                                                                            
   </div><a id="link_event" href="http://www.frenchnerd-fanclub.com/t8061-cadeau-pour-frenchnerd-les-6-ans-de-frenchnerd#315470">• en savoir plus •</a>
</div>
 <script type="text/javascript">

function compte_a_rebours()
{
 var compte_a_rebours = document.getElementById("countdown");

 var date_actuelle = new Date();
 var date_evenement = new Date("Dec 9 00:00:00 2014");
 var total_secondes = (date_evenement - date_actuelle) / 1000;
 var a=Math.floor(total_secondes)
      var jours = Math.floor(total_secondes / (60 * 60 * 24));
      var heures = Math.floor((total_secondes - (jours * 60 * 60 * 24)) / (60 * 60));
      var minutes = Math.floor((total_secondes - ((jours * 60 * 60 * 24 + heures * 60 * 60))) / 60);
      var secondes = Math.floor(total_secondes - ((jours * 60 * 60 * 24 + heures * 60 * 60 + minutes * 60)));

      var mot_jour = "J : ";
      var mot_heure = "H : ";
      var mot_minute = "M";
      var mot_seconde = "S";
  
  if (a > 86400)
   {

   if (jours == 0)
      {
         jours = '';
         mot_jour = '';
      }
      else if (jours == 1)
      {
         mot_jour = "J : ";
      }

      if (heures == 0)
      {
         /*heures = '';*/
         mot_heure = 'H : ';
      }
      else if (heures == 1)
      {
         mot_heure = "H : ";
      }

      if (minutes == 0)
      {
         /*minutes = '';*/
         mot_minute = 'M : ';
      }
      else if (minutes == 1)
      {
         mot_minute = "M : ";
      }

      if (secondes == 0)
      {
         /*secondes = '';*/
         mot_seconde = 'S';
      }
      else if (secondes == 1)
      {
         mot_seconde = "S";
      }
compte_a_rebours.innerHTML = jours + mot_jour + heures + mot_heure + minutes + mot_minute;
 }
 else if(a < 86400)
{
compte_a_rebours.innerHTML = heures + mot_heure + minutes + mot_minute+" : "+secondes + mot_seconde;
}

 var actualisation = setTimeout("compte_a_rebours();", 1000);
}
compte_a_rebours();
</script>  

[Admin]

Merci, c'est très bien, je m'occupe du css ^^

[yao]

Merci Dany et Matyas

Le widget est actuellement pas si mal.

Par contre, pour le titre et le lien, il faut changer.

Comme titre, faudrait mettre "Ne manquez pas l'exclu du FFF !" ou un truc du genre (plus court ? "Exclu du FFF !" ?).

Quant au lien, je le répète encore ici, il ne faut pas que ça amène au hitbox mais au topic :
http://www.frenchnerd-fanclub.com/t8074-exclu-interview-en-live-de-francois-descraques#316221

[Dany]

Voilà j'ai fait ce que tu voulais et j'en ai profité pour corrigé quelques une de mes erreurs d'antant! (j'avais utilisé ce code en 1ère Lycée)^^'

[Dany]

Le tout tient sur une ligne maintenant....pour moi c'est prêt, je sais pas ce que vous en dites...

[Dany]

Modif de dernière minute: J'ai juste enlevé dans total_seconde la valeur absolue, histoire que le compte à rebours ne continue pas après être arrivé à 0.
Et changé le texte quand c'est fini en "Ça a commencé!"

[yao]

Je crois Titmoff avait déjà mis en place avant ta dernière modif.

C'est où qu'il faut changer ?

je vois ça sur le FFF :

Code:

  if (total_secondes < 0)
  {
      prefixe = "LIVE François terminé il y a <br />"; // On modifie le préfixe si la différence est négatif

      total_secondes = Math.abs(total_secondes); // On ne garde que la valeur absolue

  }

Et ça sur le forum-test :

Code:

   if (total_secondes < 0)
   {
      prefixe = "L'exclu, ça commencé depuis:<br />"; // On modifie le préfixe si la différence est négatif

      total_secondes = total_secondes; // On ne garde que la valeur absolue

   }

Faut donc bien que je modifie par "total_secondes = total_secondes; // On ne garde que la valeur absolue" ou c'est autre chose ?

[Admin]

AHWHy :
Le prefix c'est ce que j'aais changé, donc ta modif' est bonne.
Mais le reste, je ne sais pas, ça doit etre ça ^^ (demande à dany pour confirmation ^^)

[Dany]

En fait cette partie du code:

Code:

   var prefixe = "";
   if (total_secondes < 0)
   {
      prefixe = "L'exclu, ça commencé depuis:<br />"; // On modifie le préfixe si la différence est négatif

      total_secondes = total_secondes; // On ne garde que la valeur absolue

   }

Servait à faire continuer le compte à rebours, le transformant en chronomètre depuis le moment où le 0 est atteint. Tu peux donc le supprimer et changer la valeur de compte_a_rebours.innerHTML = 'Compte à rebours terminé!' par ce que tu veux (par exemple "Ça a commencé!"). Je continuerai de corriger pour supprimer tout le code qui concerne la transformation en chrono.

[yao]

Je suis pas sûr de bien comprendre...

Si j'écris donc ça, c'est bien ?

Code:

if (total_secondes < 0)
   {
      prefixe = "L'interview de François Descraques a commencé ! <br />"; // On modifie le préfixe si la différence est négatif

   }

[Dany]

J'ai corrigé le probélème d'affichage du countdown

[yao]

J'ai essayé de modifier le texte mais il est beaucoup trop long maintenant et rend moche le widget

De plus, il me semblait que tu avais réussi à faire en sorte que les jours/heures/minutes/secondes apparaissent sur une seule même ligne, na ?

Et, j'ignore comment avait fait Marie mais elle a fait le fond du widget en transparent (le truc bleu clair)... mais bon, ça, elle le modifiera elle-même je crois x)

Bref, j'attends vos réponses, essentiellement concernant les deux premiers points (si vous avez une solution ou non) puis je contacte Marie pour qu'elle le mette en place sur le forum.

Merci Dany

[AH !! Why ?]

J'ai changé un peu le design de compte à rebours pour avoir un truc plus joli ^^

[Dany]

J'ai changé le js pour qu'il ne mette les secondes que quand on est à moins de h24.
Pour que ça garde que 3 compteurs. ça prend moins de place comme ça.
(on met une petite surprise pour la fin du compteur pendant quelque secondes, pour ceux qui sont là à minuit^^?)

[Dany]

Est-ce que j'affiche toujours les nombres sur 2 digits?

[yao]

Alors le texte "ANNIVERSAIRE FRENCHNERD" est vraiment très bien, merci

Pour le compteur, malheureusement, faut laisser les secondes. C'est le principe d'un compte à rebours et c'est très important dans le widget.
En fait, si on fait un compte à rebours, c'est pour que les membres le remarquent. Et, pour qu'ils remarquent, il faut que le widget soit animé. Et si on enlève les secondes, le widget sera moins mis en évidence puisqu'on ne verrait qu'un petit changement à chaque minute.
Tu vois ce que je veux dire ? ^^

Mais Marie a réussi à mettre le compte à rebours en grand et sur une seule ligne... donc je propose qu'elle s'occupe de ça elle-même xD (mais, du coup, remet les secondes).

Merci Dany ^^

[Dany]

Ouais ok, et sur la proposition d'affichage sur 2 digits?
(de 59 à 00)

[yao]

C'est égal.
Comme tu le préfères ^^

Je vais dire à Marie de s'occuper de ça ce soir

[yao]

Mais attends... y'a un problème. Tu l'as mis pour quelle heure ? 20h30 ? Minuit c'est mieux ^^'

[Dany]

Je me souciais pas trop de ça à vrai dire au début^^'...c'est corrigé.

[Contenu sponsorisé]