JS錯誤記錄 - getStyle代替offset、任意值運動框
阿新 • • 發佈：2018-12-26
本次練習錯誤總結：
1. 改變border的寬度，屬性名稱不是直接寫border，而是borderWidth。
2. 運動函式 -- 清除定時器 -- 開啟新的定時器。 不是在新定時器開啟之後再清除，而是開啟之前就要在運動函式裡清空一次！
3. 這個獲取的值需要先parseInt變成數字。 且變數要放在定時器函式裡面。（哪個函式使用的變數，就放在哪個函式裡。）
var cur = parseInt(getStyle(obj, attr));
<!DOCTYPE html> <htmllang="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>