2段相似的代码，如何封装成一个函数？
1)、先找出不同的地方；
2)、看看这些不同地方或者当成参数传递进去，或者做个判断；
数字是可以传递的，比较符号是无法传递的
封装前的代码：（有很多冗余、重复的地方）
1 <!DOCTYPE HTML> 2 <html> 3 <head> 4 <meta http-equiv="Content-Type" content="text/html; charset=utf-8"> 5 <title>无标题文档</title> 6 <style> 7 #div1 { width:100px; height:100px; background:red; position:absolute; top:50px; left:30px; } 8 </style> 9 </head> 10 11 <body> 12 13 <input id="btn1" type="button" value="往后" /> 14 <input id="btn2" type="button" value="往前" /> 15 <div id="div1"></div> 16 17 <script> 18 var oBtn1 = document.getElementById('btn1'); 19 var oBtn2 = document.getElementById('btn2'); 20 var oDiv = document.getElementById('div1'); 21 22 oBtn1.onclick = function () { 23 24 clearInterval( oDiv.timer ); 25 26 oDiv.timer = setInterval(function () { 27 28 var speed = parseInt(getStyle( oDiv, 'left' )) + -12; // 步长 29 30 if ( speed < 10 ) { 31 speed = 10; 32 } 33 34 oDiv.style.left = speed + 'px'; 35 36 if ( speed == 10 ) { 37 clearInterval( oDiv.timer ); 38 } 39 40 }, 30); 41 }; 42 43 oBtn2.onclick = function () { 44 45 clearInterval( oDiv.timer ); 46 47 oDiv.timer = setInterval(function () { 48 49 var speed = parseInt(getStyle( oDiv, 'left' )) + 12; // 步长 50 51 if ( speed > 800 ) { 52 speed = 800; 53 } 54 55 oDiv.style.left = speed + 'px'; 56 57 if ( speed == 800 ) { 58 clearInterval( oDiv.timer ); 59 } 60 61 }, 30); 62 }; 63 64 function getStyle ( obj, attr ) { return obj.currentStyle?obj.currentStyle[attr] : getComputedStyle( obj )[attr]; } 65 </script> 66 67 </body> 68 </html>
封装后的代码：
1 <!DOCTYPE HTML> 2 <html> 3 <head> 4 <meta http-equiv="Content-Type" content="text/html; charset=utf-8"> 5 <title>无标题文档</title> 6 <style> 7 #div1 { width:100px; height:100px; background:red; position:absolute; top:50px; left:30px; } 8 </style> 9 </head> 10 11 <body> 12 13 <input id="btn1" type="button" value="往后" /> 14 <input id="btn2" type="button" value="往前" /> 15 <div id="div1"></div> 16 17 <script> 18 var oBtn1 = document.getElementById('btn1'); 19 var oBtn2 = document.getElementById('btn2'); 20 var oDiv = document.getElementById('div1'); 21 22 oBtn1.onclick = function () { 23 24 doMove ( oDiv, -12, 10 ); 25 26 }; 27 28 oBtn2.onclick = function () { 29 30 doMove ( oDiv, 12, 800 ); 31 32 }; 33 34 /* 35 oDiv 12 800 > 36 oDiv -12 -10 < 37 38 doMove ( oDiv, 12, 800 ); 39 */ 40 41 function doMove ( obj, dir, target ) { 42 clearInterval( obj.timer ); 43 44 obj.timer = setInterval(function () { 45 46 var speed = parseInt(getStyle( obj, 'left' )) + dir; // 步长 47 48 if ( speed > target && dir > 0 ) { // 往前跑 49 speed = target; 50 } 51 52 if ( speed < target && dir < 0 ) { // 往后跑 53 speed = target; 54 } 55 56 obj.style.left = speed + 'px'; 57 58 if ( speed == target ) { 59 clearInterval( obj.timer ); 60 } 61 62 }, 30); 63 } 64 65 function getStyle ( obj, attr ) { return obj.currentStyle?obj.currentStyle[attr] : getComputedStyle( obj )[attr]; } 66 </script> 67 68 </body> 69 </html>