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的值不会变~
加油!!
标签:box,动画,style,50px,setInterval,top,JavaScript,getComputedStyle,mid 来源: https://www.cnblogs.com/linbudu/p/10349035.html