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