功能將不會執行（正確）不止一次

Question

我試圖改變一個div遵循這些指南的位置，使它看起來液：

• 非常小的增量同時
• 衆多每秒
• 倍以給定角度（因此所有在端點TRIG（））

我已經測試了我的功能，「端點（）」，它處理div的計算和運動和它的工作原理如預期。但是，當我嘗試多次執行該功能時，它不起作用。

<style type="text/css"> 
.ball 
{ 
    width:20px; 
    height:20px; 
    border-radius:50%; 
    background-color:#00c0c6; 
    position:absolute; 
    left:0px; 
    top:0px; 
} 
</style> 

<div id="tehBall" class="ball"></div> 

<script type="text/javascript"> 
    endpoint(slopeInRadians); //WORKS! (changes position of the div) 
    endpoint(slopeInRadians); //DOESN'T work (doesn't change the position of the div) 
    endpoint(slopeInRadians); //DOESN'T work (same as above) 
</script> 

這裏是端點函數的代碼（在終點功能使用）進行的getStyle

function endpoint(m) 
{ 
    var oldX = getStyle("tehBall", "left"); 
    var oldY = getStyle("tehBall", "top"); 

    var xAxis = parseInt(oldX); 
    var yAxis = parseInt(oldY); 

    var dX = (Math.cos(m)); 
    var dY = ((0 - Math.sin(m))); 

    xAxis += dX; 
    yAxis += dY; 

    xAxis = xAxis.toString(); 
    yAxis = yAxis.toString(); 

    xAxis += "px"; 
    yAxis += "px"; 

    document.getElementById('tehBall').style.left = xAxis; 
    document.getElementById('tehBall').style.top = yAxis; 

} 

代碼：

function getStyle(id, property){ 
    var elem = document.getElementById(id); 
    var value = window.getComputedStyle(elem,null).getPropertyValue(property); 


    return value; 
} 

任何幫助，將不勝感激

Answer 1

相反在樣式上工作時，只需將座標存儲在全局變量中，如下所示：

由於並非所有（較舊的）瀏覽器都支持浮點，因此請記得在將值放入樣式時舍入該值。

<script type="text/javascript"> 
var xAxis =0.0; 
var yAxis = 0.0; 
function endpoint(m) 
{ 
    var dX = (Math.cos(m)/* * d*/); 
    var dY = ((0 - Math.sin(m))/* * d*/); 

    xAxis += dX; 
    yAxis += dY; 

    document.getElementById('tehBall').style.left = Math.round(xAxis) + 'px'; 
    document.getElementById('tehBall').style.top = Math.round(yAxis) + 'px'; 

} 
</script>