Question

我试图创建一个将出现在300x300像素空间内的随机位置的正方形。它目前正在水平移动，但不是垂直移动。有人可以帮助我让它垂直移动吗？谢谢！

        #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

如果您移除display: none它应该是好的，请与this进行比较。

你也可以简化：

 var top = Math.random() * 300;

Answer 2

使用left水平翻译，top垂直翻译。

＆＃13;

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

＆＃13;

#space {
  width: 300px;
  height: 300px;
  background-color: #eee
}
#square {

 width: 200px;
 height:200px;
 position: relative;
 background-color: #8e4435
}

＆＃13;

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

＆＃13;

基本JavaScript：随机定位

2 个答案: