dimanche 21 janvier 2018

Position 5 divs randomly

I'm completely stuck here. I'm trying to create a program where i have 5 different divs. They need to be placed at random position when running the program. And they need to switch position when i drag my mouse over them. So far i've done this. (which is completely wrong).

   function Init()
   {
   div = document.getElementById("pixel");
   div = document.getElementById("pixel1");
   div = document.getElementById("pixel2");
   div = document.getElementById("pixel3");
   div = document.getElementById("pixel4");

   spaceW = screen.height - div.height;
   spaceH = screen.width - div.width;
   setTimeout(moveIt, 0);
   }
   function moveIt()
   {
   div.style.top = (100*Math.random()) + "%";
   div.style.left = (100*Math.random()) + "%";
   }

<body onload="Init()">
    <div id="pixel" style="background-color:blue; position:fixed; height:50px; width:50px; font-size:25px;"/>
    <div id="pixel1" style="background-color:green; position:fixed; height:50px; width:50px; font-size:25px;"/>
    <div id="pixel2" style="background-color:orange; position:fixed; height:50px; width:50px; font-size:25px;"/>
    <div id="pixel3" style="background-color:yellow; position:fixed; height:50px; width:50px; font-size:25px;"/>
    <div id="pixel4" style="background-color:red; position:fixed; height:50px; width:50px; font-size:25px;"/>
</body>

Can someone nudge me in the right direction because this clearly doesn't work.




Aucun commentaire:

Enregistrer un commentaire