Afficher un texte aléatoirement en javascript

Voir le sujet précédent Voir le sujet suivant Aller en bas

Résolu Afficher un texte aléatoirement en javascript

Message par alv le Sam 31 Mai 2014 - 10:31

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.


Dernière édition par alv le Sam 7 Juin 2014 - 6:51, édité 1 fois

alv
# Tropactif #

Messages : 1080
Inscrit(e) le : 09/07/2012

http://urlz.fr/2OYC
alv a été remercié(e) par l'auteur de ce sujet.

Résolu Re: Afficher un texte aléatoirement en javascript

Message par alv le Dim 1 Juin 2014 - 10:29

Up Very Happy

alv
# Tropactif #

Messages : 1080
Inscrit(e) le : 09/07/2012

http://urlz.fr/2OYC
alv a été remercié(e) par l'auteur de ce sujet.

Résolu Re: Afficher un texte aléatoirement en javascript

Message par alv le Lun 2 Juin 2014 - 13:58

Up

alv
# Tropactif #

Messages : 1080
Inscrit(e) le : 09/07/2012

http://urlz.fr/2OYC
alv a été remercié(e) par l'auteur de ce sujet.

Résolu Re: Afficher un texte aléatoirement en javascript

Message par alv le Mar 3 Juin 2014 - 13:36

Up svp

alv
# Tropactif #

Messages : 1080
Inscrit(e) le : 09/07/2012

http://urlz.fr/2OYC
alv a été remercié(e) par l'auteur de ce sujet.

Résolu Re: Afficher un texte aléatoirement en javascript

Message par alv le Mer 4 Juin 2014 - 13:16

Up aidez moi 

alv
# Tropactif #

Messages : 1080
Inscrit(e) le : 09/07/2012

http://urlz.fr/2OYC
alv a été remercié(e) par l'auteur de ce sujet.

Résolu Re: Afficher un texte aléatoirement en javascript

Message par alv le Jeu 5 Juin 2014 - 13:06

Up

alv
# Tropactif #

Messages : 1080
Inscrit(e) le : 09/07/2012

http://urlz.fr/2OYC
alv a été remercié(e) par l'auteur de ce sujet.

Résolu Re: Afficher un texte aléatoirement en javascript

Message par alv le Ven 6 Juin 2014 - 13:29

Up

alv
# Tropactif #

Messages : 1080
Inscrit(e) le : 09/07/2012

http://urlz.fr/2OYC
alv a été remercié(e) par l'auteur de ce sujet.

Résolu Re: Afficher un texte aléatoirement en javascript

Message par Ea le Ven 6 Juin 2014 - 15:47

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>

Ea
Aidactif
Aidactif

Messages : 23427
Inscrit(e) le : 04/04/2008

Ea a été remercié(e) par l'auteur de ce sujet.

Résolu Re: Afficher un texte aléatoirement en javascript

Message par alv le Ven 6 Juin 2014 - 19:39

Bonsoir,
Merci beaucoup, c'est parfait Very Happy

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.

alv
# Tropactif #

Messages : 1080
Inscrit(e) le : 09/07/2012

http://urlz.fr/2OYC
alv a été remercié(e) par l'auteur de ce sujet.

Résolu Re: Afficher un texte aléatoirement en javascript

Message par Ea le Ven 6 Juin 2014 - 20:22

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>

Ea
Aidactif
Aidactif

Messages : 23427
Inscrit(e) le : 04/04/2008

Ea a été remercié(e) par l'auteur de ce sujet.

Résolu Re: Afficher un texte aléatoirement en javascript

Message par alv le Sam 7 Juin 2014 - 6:48

Bonjour,
Nickel, merci beaucoup Very Happy

résolu

alv
# Tropactif #

Messages : 1080
Inscrit(e) le : 09/07/2012

http://urlz.fr/2OYC
alv a été remercié(e) par l'auteur de ce sujet.

Voir le sujet précédent Voir le sujet suivant Revenir en haut


Permission de ce forum:
Vous ne pouvez pas répondre aux sujets dans ce forum