Javascript Div不是从随机位置开始的

首先，我在stakeoverflow中看到了很多答案，但没有一个对我有帮助！！！我想从一个随机的位置开始我的div，然后它会移动。而不是从一个静止的位置显示，然后到一个随机的位置，然后开始移动。我试图通过javascript在中声明我的顶部和左侧

$( document ).ready(function()

但这没有帮助

HTML

JavaScript

var i=0;
var j=0;
function ballMove(){
var d=document.getElementById("ball");
var temp=i;
if(i<1)
{   
     i = Math.floor(Math.random() * (200));
     j = Math.floor(Math.random() * (200));

}
for(;i<2+temp;i++,j++)
{
    d.style.left=i+"px";
    d.style.top=j+"px";
}
//document.getElementById('ball').style.display = 'block';

}

function timeChange()
{
setInterval( ballMove, 500);
}

var i=0；
var j=0；
函数ballMove（）{
var d=document.getElementById（“ball”）；
var-temp=i；
如果（i首先尝试隐藏它，因为脚本在DOM就绪时运行

<div class="ballarea" id="ballarea1">
        <div class="circle type" id="ball" style="display:none"></div>
    </div>

请设置一把小提琴你是否尝试过先隐藏它，然后在设置随机位置后再显示它？我尝试过。它不起作用。它和以前一样。我不太明白你想用这个
var temp=I；if（它帮助它移动。每次我增加它时（我首先将它初始化为0）我希望它每500ns移动2 px，所以我更新i，因为我希望它比i的当前值多移动2 px。所以我将该值存储在temp中（因为每次迭代我都在增加，我不能将其置于infinte状态），只是更新了我的答案。别忘了在球中添加
style=“display:none”
var i=0;
var j=0;
function ballMove(){
var d=document.getElementById("ball");
var temp=i;
if(i<1)
{   
     i = Math.floor(Math.random() * (200));
     j = Math.floor(Math.random() * (200));

}
for(;i<2+temp;i++,j++)
{
    d.style.left=i+"px";
    d.style.top=j+"px";
}
//document.getElementById('ball').style.display = 'block';

}

function timeChange()
{
setInterval( ballMove, 500);
}

<div class="ballarea" id="ballarea1">
        <div class="circle type" id="ball" style="display:none"></div>
    </div>

var i = 0;
var j = 0;
function randomBall(){
  var d = document.getElementById("ball");
  i = Math.floor(Math.random() * (200));
  j = Math.floor(Math.random() * (200));
  d.style.left = i+"px";
  d.style.top = j+"px";
  d.style.display = "block";
}

function ballMove(){
  var d=document.getElementById("ball");
  i += 2;
  j += 2;
  d.style.left = i+"px";
  d.style.top = j+"px";
}

function timeChange()
{
  randomBall();
  setInterval( ballMove, 500);
}