javascript - Window.load 不起作用

Question

有人可以告诉我为什么下一个代码不起作用吗？

var nump = 0;
 function point() {
  nump++;
  document.getElementById('point').style.margin = nump + 'px 0px 0px';
 }
window.onload = point();

我尝试在加载窗口时使 div 移动，谢谢大家。

Answer 1

分配一个命名函数的事件处理程序是在没有 () 的情况下完成的

基于您的小提琴的演示

var nump = 100; // setting a value that actually is visible
function point() {
  nump++;
  document.getElementById('point').style.margin = nump + 'px 0px 0px';
}
window.onload = point;

除非命名函数返回一个函数。

由于您使用的是 jQuery：

var nump = 0;
function point() {
  nump++;
  document.getElementById('point').style.margin = nump + 'px 0px 0px';
}
$(function() {
  point(); // will move 1 pixel
});

也许你的意思是

$(function() {
  setInterval(function() {
    point(); // will move 1 pixel
  },100); // move one pixel every 100ms
});

Answer 2

要扩展@mplungjan 的答案：您应该只使用 JavaScript 分配必要的样式，无需更改任何其他内容，然后是 margin-top 属性：

var nump = 0;
window.onload=function() {
  nump++;
  document.getElementById('point').style.marginTop = nump;
}

Answer 3

1）你需要交出一个函数引用：

window.onload = point;

2) 你的评论

我尝试在加载窗口时使 div 移动

让我假设，您想以递归方式调用该函数，这应该通过以下方式完成：

function point() {
    nump+=4;
    document.getElementById('point').style.margin = nump + 'px 0px 0px';
    // exemplary constraint to exit the loop, change to your liking
    if (nump < 300){setTimeout(point,20);}
}

您修改后的示例

Answer 4

通过移动，你想说，像这样：http: //jsfiddle.net/myC7J/1/

这将添加一个setInterval这样的：

var interval;
window.onload = function(){ interval = setInterval(point, 100);}

编辑 ：

既然您似乎想制作一个游戏：如果您想在 DOM 中使用位置，为什么不使用position: absolute，否则top，left 您应该考虑使用 Canvas。