javascript - 使用javascript连续移动div位置

Question

我想从左到右然后从上到下连续移动我的 div 位置。

第一次移动后我的代码停止。

请查看https://jsfiddle.net/LLqmL33p/

     function placeDiv(x_pos) {
  var d = document.getElementById('boxed');
  d.style.position = "absolute";
  d.style.left = x_pos+'px';
    setTimeout(function(){   placeDiv2(10); }, 1000);

}
function placeDiv2(y_pos) {
  var d = document.getElementById('boxed');
  d.style.position = "absolute";
  d.style.top = y_pos+'px';
  setTimeout(function(){ placeDiv(15); }, 1000);

}

placeDiv(10);

我不明白我现在能做什么？

Answer 1

函数持续运行，但是因为 x_pos=10 和 y_pos=15 总是有相同的值，div 不会移动，试试这个:

function placeDiv(x_pos) {
     var d = document.getElementById('boxed');
     d.style.position = "absolute";
     if(d.style.left=="")
     {
        var cur_left=0;
     } 
     else
     {
         var cur_left=parseFloat(d.style.left);
     }
     d.style.left = (cur_left+x_pos)+'px';
     setTimeout(function(){   placeDiv2(10); }, 1000);

 }
 function placeDiv2(y_pos) {
     var d = document.getElementById('boxed');
     //d.style.position = "absolute";
     if(d.style.top=="")
     {
        var cur_top=0;
     }
     else
     {
        var cur_top=parseFloat(d.style.top);
     }
     d.style.top = (cur_top+y_pos)+'px';
     setTimeout(function(){ placeDiv(15); }, 1000);

}

placeDiv(10);

我所做的是将 x_pos 和 y_pos 值添加到 div 的当前左侧和顶部值。

这是更新后的 fiddle :https://jsfiddle.net/LLqmL33p/2/ 抱歉我的英语不好。