如何使用JavaScript实现div元素每秒钟向右移动10像素？

问题原因 #

• 你直接对带px后缀的字符串做+=运算，执行的是字符串拼接逻辑而非数值累加，才会出现10px10px10px这类异常值
• 把style.top赋值给普通变量后，修改变量不会同步更新到DOM元素的样式上，移动效果不会实际生效
• 向右移动需要修改left属性而非top属性，top控制的是垂直方向的位置
• 你没有给元素设置初始的left值，第一次读取属性时会拿到空字符串，无法正常做数值计算

修复后的代码 #

JS代码

var squareStyle = document.getElementById("sjuku").style;
// 用数值变量存储水平位置，设置初始值为0
var positionX = 0;

function TingLing() {
  // 数值累加10
  positionX += 10;
  // 拼接px后缀后赋值给style.left，同步更新到DOM
  squareStyle.left = positionX + "px";
  console.log("square left position is ", squareStyle.left)
}

setInterval(TingLing, 1000);

CSS代码（补充初始left值）

#denneYes {
    position: absolute;
    left: 1300px;
}

#sjuku {
  height: 2em;
  width: 2em;
  background-color: #00ffff;
  position: absolute;
  /* 补充初始水平位置 */
  left: 0;
}

HTML代码无需修改

<a href="C:\Users\05bawmud\Documents\Mappe for organisering\Nettside2\Index\index.html" id="denneYes">Go bak</a>
<div id="sjuku"></div>

内容的提问来源于stack exchange，提问作者Bawer