Div并非从随机位置开始

Question

首先，我已经看到很多答案在移植过程中，但没有一个能够帮助我！我想从一个随机的位置开始我的div，然后它会移动。而是从静态位置显示出来，然后进入随机位置，然后开始移动。我想声明我顶部和

$(document).ready(function() 

由JavaScript离开，但它不能帮助

HTML

<div class="ballarea" id="ballarea1"> 
     <div class="circle type" id="ball"></div> 
    </div> 

CSS

.circle{ 
border-radius: 50%; 
border: thin; 
border-color: blue; 
} 
.type { 
width: 20px; 
height: 20px; 
border: 5px solid blue; 
position: relative; 
} 

.ballarea{ 
width: 300px; 
height: 400px; 
border: solid black; 
overflow: hidden; 
position: relative; 
} 

的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); 
} 

现在首先它像下面，然后将其从一个随机位置开始静止位置开始。我想从一个不是从静态位置的随机位置展示它

Answer 1

尝试先隐藏它，因为脚本在DOM准备就绪时运行。

<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); 
}