Afficher un texte aléatoirement en javascript

[alv]

Bonjour,
J'ai ce code pour afficher du texte aléatoirement :

Code:

Messages du "Livre d'or" :<br>
<script type="text/javascript">
function livredor(){
   var phrase = new Array();
   phrase[0] = "Bravo les administrateurs pour le beau travail que vous avez réalisé !";
   phrase[1] = "Vous avez pensé à tout. Bien joué les administrateurs";
   phrase[2] = "Ce forum est très complet, très joli et en plus il y a tout sur les verts";
   phrase[3] = "C'est tout simplement génial ce que vous avez fait les administrateurs";
   phrase[4] = "Je recommanderai très volontiers ce forum à mes amis";
   phrase[5] = "J'aime venir régulièrement sur ce forum";
   phrase[6] = "Je connaissais déjà quelques forums, mais celui-là est celui que je préfère";
   phrase[7] = "On apprend tellement de chose. Merci et continuez comme ça";
   phrase[8] = "Je viens de découvrir ce forum, il est vraiment génial et complet";
   phrase[9] = "J'aime beaucoup ce forum. Il est très complet, très bien fait";
   var index = Math.floor(Math.random() * phrase.length);
   document.write('<i>' + phrase[index] + '</i>');
}
livredor();
</script>

Mais j'aimerai ajouter un lien en dessous des messages : "Lire les autres commentaires".
Au clic, je souhaiterais que les phrases s'affichent les unes après les autres jusqu'à la 9ème et ensuite ça reprend depuis la phrase[0].
Comment faire ceci ?
Merci d'avance.

[alv]

Up

[alv]

Up

[alv]

Up svp

[alv]

Up  

[alv]

Up

[alv]

Up

[Ea]

Bonjour,


Voici un exemple :

Code:

Messages du "Livre d'or" : <div id="message_guestbook"></div>
<script type="text/javascript">

(function(){
  var phrases = new Array();
  phrases.push("Bravo les administrateurs pour le beau travail que vous avez réalisé !");
  phrases.push("Vous avez pensé à tout. Bien joué les administrateurs");
  phrases.push("Ce forum est très complet, très joli et en plus il y a tout sur les verts");
  phrases.push("C'est tout simplement génial ce que vous avez fait les administrateurs");
  phrases.push("Je recommanderai très volontiers ce forum à mes amis");
  phrases.push("J'aime venir régulièrement sur ce forum");
  phrases.push("Je connaissais déjà quelques forums, mais celui-là est celui que je préfère");
  phrases.push("On apprend tellement de chose. Merci et continuez comme ça");
  phrases.push("Je viens de découvrir ce forum, il est vraiment génial et complet");
  phrases.push("J'aime beaucoup ce forum. Il est très complet, très bien fait");

  var index = Math.floor(Math.random() * phrases.length);

  jQuery('#message_guestbook').click(function(){
    jQuery(this).html(phrases[index++ % phrases.length]);
  }).click();
})();

</script>

j'ai remplacé les phrase[1] ... par des phrases.push ( qui ajoute un élément à un tableau ) car je trouve qu'il est plus difficile de faire une erreur, on pourrait aussi mettre simplement :

Code:

var phrases = [ "phrase 1", "phrase 2", "phrase 3"];

à part cela on exécute juste une fonction au clic qui va mettre la prochaine phrase ( la première ayant été choisie aléatoirement ), et on réalise un premier clic "factice".

Le "index++ % phrases.length" peut sembler cryptique, mais il signifie simplement :

-> augmenter la valeur de index de 1 ( donc l'équivalent de "index = index + 1;" )
-> retourner le reste de la division de "index" par "phrases.length" ( si il y a 7 phrases et que l'index est 6 -> le reste est 6, si l'index est 7 -> le reste est 0, si l'index est 8 -> le reste est 1, ... ).

Étant donné qu'il y a un identifiant, on peut personnaliser l'affichage de la phrase en CSS, par exemple :

Code:

#message_guestbook {
  cursor: pointer; /* curseur de souris identique à celui des liens */
  color: blue; /* couleur bleu */
}

Cordialement.

ps : en relisant le premier message du sujet je me suis aperçu que c'était sur un lien à part qu'il fallait cliquer et pas sur la phrase elle-même, voici le script avec une modification en ce sens :

Code:

Messages du "Livre d'or" :
<div id="message_guestbook"></div>
<div id="message_guestbook_more">Lire les autres commentaires</div>
<script type="text/javascript">
 
(function(){
  var phrases = new Array();
  phrases.push("Bravo les administrateurs pour le beau travail que vous avez réalisé !");
  phrases.push("Vous avez pensé à tout. Bien joué les administrateurs");
  phrases.push("Ce forum est très complet, très joli et en plus il y a tout sur les verts");
  phrases.push("C'est tout simplement génial ce que vous avez fait les administrateurs");
  phrases.push("Je recommanderai très volontiers ce forum à mes amis");
  phrases.push("J'aime venir régulièrement sur ce forum");
  phrases.push("Je connaissais déjà quelques forums, mais celui-là est celui que je préfère");
  phrases.push("On apprend tellement de chose. Merci et continuez comme ça");
  phrases.push("Je viens de découvrir ce forum, il est vraiment génial et complet");
  phrases.push("J'aime beaucoup ce forum. Il est très complet, très bien fait");
 
  var index = Math.floor(Math.random() * phrases.length);
 
  jQuery('#message_guestbook_more').click(function(){
    jQuery('#message_guestbook').html(phrases[index++ % phrases.length]);
  }).click();
})();
 
</script>

[alv]

Bonsoir,
Merci beaucoup, c'est parfait

Mais je souhaiterais quelque chose en plus. Qu'il y ait un lien pour reculer dans les messages, en plus de celui qui permet d'avancer au suivant.

[Ea]

On pourrait faire comme ceci :

Code:

Messages du "Livre d'or" :
<div id="message_guestbook"></div>
<div><span id="message_guestbook_after">Lire les autres commentaires</span> <span id="message_guestbook_before">(précédent)</span></div>
<script type="text/javascript">
 
(function(){
  var phrases = new Array();
  phrases.push("Bravo les administrateurs pour le beau travail que vous avez réalisé !");
  phrases.push("Vous avez pensé à tout. Bien joué les administrateurs");
  phrases.push("Ce forum est très complet, très joli et en plus il y a tout sur les verts");
  phrases.push("C'est tout simplement génial ce que vous avez fait les administrateurs");
  phrases.push("Je recommanderai très volontiers ce forum à mes amis");
  phrases.push("J'aime venir régulièrement sur ce forum");
  phrases.push("Je connaissais déjà quelques forums, mais celui-là est celui que je préfère");
  phrases.push("On apprend tellement de chose. Merci et continuez comme ça");
  phrases.push("Je viens de découvrir ce forum, il est vraiment génial et complet");
  phrases.push("J'aime beaucoup ce forum. Il est très complet, très bien fait");
 
  var index = Math.floor(Math.random() * phrases.length);
 
  jQuery('#message_guestbook_after').click(function(){
    jQuery('#message_guestbook').html(phrases[++index % phrases.length]);
  }).click();
  jQuery('#message_guestbook_before').click(function(){
    index += phrases.length - 1;
    jQuery('#message_guestbook').html(phrases[index % phrases.length]);
  });
})();
 
</script>

[alv]

Bonjour,
Nickel, merci beaucoup