Partage
  • Partager sur Facebook
  • Partager sur Twitter

Position aléatoire sur une page

Sujet résolu
    23 août 2019 à 16:54:08

    Bonjour,

    N'y connaissant pas grand chose en javascript, j'ai réussi à afficher une image aléatoire parmi un dossier avec ce code : 

    function event_noel()
    {
    var x=document.getElementById("event_noel")
    x.innerHTML="<img src=\"/images/avatars/"+Math.floor((Math.random()*194)+1)+".png\" width=\"100\" height=\"100\" />"
    }
    event_noel();

    A partir de ce code, j'aimerais qu'il s'affiche un peu n'importe où sur la page à chaque actualisation de cette même page.

    Comment je pourrais faire ? 

    -
    Edité par Lucryio 23 août 2019 à 19:41:31

    • Partager sur Facebook
    • Partager sur Twitter
      23 août 2019 à 21:31:15

      Bonjour ^^

      Tu peux potentiellement ajouter une boucle  qui créera des espaces (méthode bourrin).

      Exemple:

      var i = Math.floor(Math.random()*200);

      var i2 = Math.floor(Math.random()*10)+i;

      while(i < i2) {

      var e = document.querySelector("#id-du-parent-de-l-image").innerHTML;

      document.querySelector("#id-du-parent-de-l-image").innerHTML = e +" ";

      i += 1;

      }

      Sinon, tu peux la positionner avec des top, des bottom, left et right (ou autre).

      J'éspère que ça t'aura aidé :)

      (et n'oublie pas de lâcher un like... ah oups, je me suis trompé d'endroit ;) )

      -
      Edité par Majoras16Forever 23 août 2019 à 21:35:00

      • Partager sur Facebook
      • Partager sur Twitter
        24 août 2019 à 17:48:21

        Bonjour,

        Merci pour ta réponse.

        N'y connaissant rien en javascript, tu pourrais adapter mon code pour faire le positionnement aléatoire ?

        • Partager sur Facebook
        • Partager sur Twitter
          24 août 2019 à 21:38:12

          Salut :)

          Comme je suis nul en CSS, je ne peux te donner que la version bourrin x)

          (désolé, mais sur mobile il n'y a pas de bouton <code> :( )

          function event_noel()

          {

          var x = document.getElementById("event_noel");

          // Tu peux remplacer document.getElementById("event_noel") par document.querySelector("#event_noel"), ça t'offre plus de possibilités

          // Dans t, on aura les espaces

          var t = "";

          // On crée un nombre aléatoire + 1 * 100

          var i = Math.floor(Math.random()+1*100);

          // On crée un autre nombre aléatoire +1 * 20 * i, donc obligatoirement plus grand que i

          var i2 = Math.floor(Math.random()+1*20)*i;

          // On crée tous les espaces

          while(i < i2) {

          // On ajoute un espace à t

          t += " ";

          i += 1;

          }

          x.innerHTML= t+"<img src=\"/images/avatars/"+Math.floor(Math.random()*194+1)+".png\" width=\"100\" height=\"100\" />";

          }

          event_noel();

          • Partager sur Facebook
          • Partager sur Twitter
            25 août 2019 à 12:16:47

            Je te remercie pour ton code par contre l'image s'affiche toujours au même endroit est-ce normal ?
            • Partager sur Facebook
            • Partager sur Twitter
              25 août 2019 à 21:21:32

              Salut,

              j'avais pas testé le code donc bon x)

              Je l'ai refait ET TESTÉ :

              function event_noel() {

              /* Pour ne pas avoir à mettre le CSS dans une balise <style>, je le met en JS */

              document.querySelector("#event_noel").style = "text-overflow: ellipsis;word-wrap: break-word;";

              var x = document.getElementById("event_noel");

              // Tu peux remplacer document.getElementById("event_noel") par document.querySelector("#event_noel"), ça t'offre plus de possibilités

              // Dans t, on aura les espaces

              var t = "";

              // On crée un nombre aléatoire + 1 * 100

              var i = Math.floor(Math.random()*200);

              // On crée un autre nombre aléatoire +1 * 20 * i, donc obligatoirement plus grand que i

              var i2 = Math.floor(Math.random()*10*i+(i^10));

              // On crée tous les espaces

              while(i < i2) {

              // On ajoute un espace à t

              t += "&nbsp;";

              i += 1;

              }

              x.innerHTML= t+"<img src=\"/avatars/"+Math.floor(Math.random()*194+1)+".png\" width=\"100\" height=\"100\" />";

              }

              event_noel();

              -
              Edité par Majoras16Forever 25 août 2019 à 21:26:11

              • Partager sur Facebook
              • Partager sur Twitter
                25 août 2019 à 23:36:42

                Je te remercie pour ton aide c'est super sympa ;)

                Je vais étudier le code pour le modifier l'arranger fin essayer de me mettre un peu au js ^^

                Merci.

                • Partager sur Facebook
                • Partager sur Twitter
                  26 août 2019 à 0:29:25

                  Y’as un bouton code sur mobile il faut juste basculer en mode paysage 👍
                  • Partager sur Facebook
                  • Partager sur Twitter

                  Position aléatoire sur une page

                  × Après avoir cliqué sur "Répondre" vous serez invité à vous connecter pour que votre message soit publié.
                  • Editeur
                  • Markdown