Afficher un texte aléatoirement en javascript

2 participants

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

alv
Membre habitué

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

https://www.forumpeuplevert.com
alv a été remercié(e) par l'auteur de ce sujet.

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

Message par alv Dim 1 Juin 2014 - 10:29

Up Very Happy
alv

alv
Membre habitué

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

https://www.forumpeuplevert.com
alv a été remercié(e) par l'auteur de ce sujet.

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

Message par alv Lun 2 Juin 2014 - 13:58

Up
alv

alv
Membre habitué

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

https://www.forumpeuplevert.com
alv a été remercié(e) par l'auteur de ce sujet.

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

Message par alv Mar 3 Juin 2014 - 13:36

Up svp
alv

alv
Membre habitué

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

https://www.forumpeuplevert.com
alv a été remercié(e) par l'auteur de ce sujet.

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

Message par alv Mer 4 Juin 2014 - 13:16

Up aidez moi 
alv

alv
Membre habitué

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

https://www.forumpeuplevert.com
alv a été remercié(e) par l'auteur de ce sujet.

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

Message par alv Jeu 5 Juin 2014 - 13:06

Up
alv

alv
Membre habitué

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

https://www.forumpeuplevert.com
alv a été remercié(e) par l'auteur de ce sujet.

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

Message par alv Ven 6 Juin 2014 - 13:29

Up
alv

alv
Membre habitué

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

https://www.forumpeuplevert.com
alv a été remercié(e) par l'auteur de ce sujet.

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

Message par Ea 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

Ea
Aidactif
Aidactif

Messages : 23583
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 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

alv
Membre habitué

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

https://www.forumpeuplevert.com
alv a été remercié(e) par l'auteur de ce sujet.

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

Message par Ea 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

Ea
Aidactif
Aidactif

Messages : 23583
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 Sam 7 Juin 2014 - 6:48

Bonjour,
Nickel, merci beaucoup Very Happy

résolu
alv

alv
Membre habitué

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

https://www.forumpeuplevert.com
alv a été remercié(e) par l'auteur de ce sujet.

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

- Sujets similaires

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