從JS代碼定位div's

Question

所以我正在創建一個粒子模擬器，並且我正在使用css來繪製圖形。我在JS中創建了兩個不同的函數來管理頁面上的X和Y位置。要做到這一點，我只是

.particle2 { 
    width: 50px; 
    height: 50px; 
    background: red; 
    border-radius: 25px; 
    position:absolute; 
    top: yPosCalc; 
    right: xPosCalc; 
} 

我明白這不會在所有的工作，但我不知道如何在CSS中使用。我也試過只用

<div style="width: 50px; 
    height: 50px; 
    background: red; 
    border-radius: 25px; 
    position:absolute; 
    top: yPosCalc; 
    right: xPosCalc;"><p>particle1<p/> 
<div/> 

從那我只是完全相同的事情。我的小球只停留在右上角，他們不遵循任何功能規則。我不知道如何正確使用它，或者如果我可以做到這一點。我不知道這是否會有所幫助，但這裏是代碼中稍早使用的兩個函數。

function yPosCalc(yPos, timeInAir, initialVelocityY, initialYPos) { 
    yPos = -4.8 * timeInAir * timeInAir + initialVelocityY + initialYPos; 
    if (yPos <= -2500) { 
     yPos = 2499; 
    } 
    return yPos; 
} 

function xPosCalc(xPos, timeInAir, intialVelocityX, intialXpos) { 
    xPos = intialVelocityX * timeInAir * .384 - 480; 
    /* This is for average webs size 960/2500 to get into right scale then 
    minus half of 960 to bring it into the middle (from the right side) */ 
    if (xPos >= 2500) { 
     xPos = -2499; 
    } 
    if (xPos <= -2500) { 
     xPos = 2499; 

    } 
    return xPos; 
} 

Answer 1

這看起來像一個可愛的小項目做的，所以經過一些黑客和一些無限循環失去了我所有的代碼，我來了與此FIDDLE（我喜歡看原子在屏幕上彈跳！）。

通過我在開始/停止按鈕上面放置的x/y座標，您可以看到代碼正在做它應該做的事情，但是我可以想出一種方法將彈跳球保持在那個小窗口中。

所以你更瞭解你的方程，並且可以修復它。

JS

var xPos = 60; 
var yPos = 70; 
var timeInAir = 2; 
var initialVelocityX = 2; 
var initialVelocityY = 3; 
var initialXpos = 50; 
var initialYpos = 50; 
var timer; 

$('.particle2').css({ 
        top: initialYpos, 
        left: initialXpos 
        }); 

$('#startme').on('click', function(){ 
    timedCount(); 
            }); 

function timedCount() 
{ 
    timer = setTimeout(function(){timedCount()},1000); 
    xPos = xPosCalc(xPos, timeInAir, initialVelocityX, initialXpos); 
    yPos = yPosCalc(yPos, timeInAir, initialVelocityY, initialYpos); 
    $('.putmehere').html("x= " + xPos.toFixed(1) + ' -- ' + "y= " + yPos.toFixed(1)); 
    timeInAir = timeInAir + 2; 
    $('.particle2').css({ 
         top: yPos, 
         left: xPos 
         }); 
} 

function xPosCalc(xPos, timeInAir, intialVelocityX, initialXpos) { 
    xPos = intialVelocityX * timeInAir * 0.384 - 480; 
    return xPos; 
} 

function yPosCalc (yPos, timeInAir, initialVelocityY, initialYPos) 
{ 
    yPos = -4.8 * timeInAir * timeInAir + initialVelocityY + initialYPos; 
    return yPos; 
} 

$('#stopme').on('click', function(){ 
    clearTimeout(timer); 
}); 

Answer 2

要定位在JavaScript中使用絕對格：

document.getElementById("divID").style.left="100px"; //new positon 
document.getElementById("divID").style.top="100px"; //new positon