JS错误记录 - getStyle代替offset、任意值运动框
本次练习错误总结：
1. 改变border的宽度，属性名称不是直接写border，而是borderWidth。
2. 运动函数 -- 清除定时器 -- 开启新的定时器。 不是在新定时器开启之后再清除，而是开启之前就要在运动函数里清空一次！
3. 这个获取的值需要先parseInt变成数字。 且变量要放在定时器函数里面。（哪个函数使用的变量，就放在哪个函数里。）
var cur = parseInt(getStyle(obj, attr));
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> <style> div{ width: 200px; height: 200px; border: 10px solid black; background-color: yellow; float: left; margin: 30px; } </style> <script> window.onload = function () { var oDiv1 = document.getElementById('div1'); oDiv1.onmouseover = function () { startMove(this, 'width', 600) }; oDiv1.onmouseout = function () { startMove(this, 'width', 200) }; var oDiv2 = document.getElementById('div2'); oDiv2.onmouseover = function () { startMove(this, 'height', 600) }; oDiv2.onmouseout = function () { startMove(this, 'height', 200) }; var oDiv3 = document.getElementById('div3'); oDiv3.onmouseover = function () { startMove(this, 'font-size', 50) }; oDiv3.onmouseout = function () { startMove(this, 'font-size', 10) }; var oDiv4 = document.getElementById('div4'); oDiv4.onmouseover = function () { startMove(this, 'borderWidth', 150) //不是border，是borderWidth }; oDiv4.onmouseout = function () { startMove(this, 'borderWidth', 10) }; }; function getStyle(obj, name) { if(obj.currentStyle) { return obj.currentStyle[name]; } else { return getComputedStyle(obj, false)[name]; } }; function startMove(obj, attr, iTarget) { clearInterval(obj.timer); //清除定时器是放在运动函数里，新启动定时器之前，不是新启动的定时器里面。 obj.timer = setInterval( function () { var cur = parseInt(getStyle(obj, attr));//这个变量也要放在定时器里面吗？？（一开始是放在运动函数里了） var speed = (iTarget - cur)/4; speed = speed>0? Math.ceil(speed):Math.floor(speed); if( cur == iTarget ) { clearInterval(obj.timer) } else { obj.style[attr] = cur + speed + 'px'; } },30) } </script> </head> <body> <div id="div1">变宽</div> <div id="div2">变高</div> <div id="div3">这些字体会变大哦</div> <div id="div4">border变化</div> </body> </html>
