Question

我用console.log{"test")进行了测试，它多次写入，因此我知道计时可以，但是div不会移动！

var myVar = setInterval(myTimer, 100);

function myTimer() {
  var carre = document.getElementById("carre");
  carre.style.marginLeft = carre.style.marginLeft + "10px";
}

<div id="carre" style="width:100px;height:100px;background-color:red;position:absolute;"></div>

Answer 1

您犯了两个错误。

您需要parseInt将marginLeft转换为数字，因为它会返回带有px的数字。
第二，您应该仅添加10，不添加""，并在末尾添加"px"。

var myVar = setInterval(myTimer, 100);

function myTimer() {
  var carre = document.getElementById("carre");
  console.log()
  carre.style.marginLeft = (parseInt(carre.style.marginLeft)||0) + 10 + 'px';
}

<div id="carre" style="width:100px;height:100px;background-color:red;position:absolute;"></div>

Answer 2

问题是您不能在另一个字符串的末尾添加字符串（“ 10px”），并且不能期望将其视为数学运算。这两个值都不是数字。

这将起作用：

var myVar = setInterval(myTimer, 100);

function myTimer() {
  var carre = document.getElementById("carre");
  if (carre.style.marginLeft == "") {
    carre.style.marginLeft = "10px";
  } else {
    carre.style.marginLeft = (parseInt(carre.style.marginLeft) + 10) + "px";
  }
}

<div id="carre" style="width:100px;height:100px;background-color:red;position:absolute;"></div>

如何使用计时器移动div？

2 个答案: