从JS代码定位div

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中定位绝对div，请使用：

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