JavaScript 字符串拼接 & setInterval()实现简单动画

 在学习JavaScript DOM编程艺术第十章时，遇到了一个小问题：

想要实现的最终效果：一个小方块不断的向下移动。

小方块绝对定位，设置好top与left值后，写了一个动态获取方块到上方距离并在每次调用中加50px的函数

 

function move(){
            box.style.top += 50px；//错在这一行
            console.log(getComputedStyle(box).top);
        }

 

由于还比较小白，忘记了.style.property只能获取内联样式，用console.log发现问题（输出的是空值）之后，又改成了= getComputedStyle(box).top + "50px" 还是不行，查了一下发现这样相当于"200px10px"的一个字符串，没有意义的。然后我也不知道我咋想的，= getComputedStyle(box).top -"px"+"50px"（我可真是鬼才）突然想到了用parseInt，我直接给你变成数值类型，然后在末尾拼个px

var mid = parseInt(getComputedStyle(box).top);
box.style.top = mid+50+"px";

写到这里，我又回去用typeOf确认了box.style.top是string~（我记性真的bad）

这里还犯了一个小错误，把var mid 写在了函数外面，这样只会改变一次，因为mid的值不会变~

 

 

加油！！