Grundlegendes JavaScript: zufällige Positionierung

Question

Ich versuche, ein Quadrat zu erstellen, das an einem zufälligen Ort innerhalb eines 300x300px Raumes erscheinen wird. Es bewegt sich derzeit horizontal, aber nicht vertikal. Kann mir jemand helfen, es auch vertikal zu bewegen? Vielen Dank!

 #square {width: 200px; 
     height: 200px; 
     display: none; 
     position: relative; 
     } 

     var top=Math.random(); 
       top=top*300;     
     var left=Math.random(); 
       left=left*300;      
     document.getElementById("square").style.top=top+"px";     
     document.getElementById("square").style.left=left+"px";  

Answer 1

Verwenden left horizontal und vertikal top für übersetzen.

const getRandom = (min, max) => Math.floor(Math.random()*(max-min+1)+min); 
 

 
const square= document.querySelector('#square'); 
 
setInterval(() => { 
 
    square.style.left= getRandom(0, 300 - 200)+'px'; // Horizontally 
 
    square.style.top = getRandom(0, 300 - 200)+'px'; // Vertically 
 
    
 
}, 500); // every 1/2 second

#space { 
 
    width: 300px; 
 
    height: 300px; 
 
    background-color: #eee 
 
} 
 
#square { 
 

 
width: 200px; 
 
height:200px; 
 
position: relative; 
 
background-color: #8e4435 
 
}

<div id="space"> 
 
    <div id="square"> 
 

 
    </div> 
 

 
</div>

Answer 2

Wenn Sie die display: none entfernen es gut sein sollte, mit this vergleichen.

Auch Sie könnten mit diesem vereinfachen:

var top = Math.random() * 300;