Div не начинается с случайной позиции

Question

Прежде всего я видел много ответов в потоке, но ни один из них не помог мне !!! Я хочу запустить свой div из случайной позиции, а затем он будет двигаться. Вместо этого он показывает статическое положение, а затем он попадает в случайную позицию, а затем начинает двигаться. Я пытался объявить мою верхнюю и оставленный JavaScript в

$(document).ready(function() 

, но это не помогает

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