定时器管理与函数封装 

 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         clearInterval( oDiv.timer );
24         oDiv.timer = setInterval(function () {
25             var speed = parseInt(getStyle( oDiv, 'left' )) + -12;            // 步长
26             if ( speed < 10 ) {
27                 speed = 10;
28             }
29             oDiv.style.left = speed + 'px';
30             if ( speed == 10 ) {
31                 clearInterval( oDiv.timer );
32             }
33         }, 30);
34     };
35 
36     oBtn2.onclick = function () {
37         clearInterval( oDiv.timer );
38         oDiv.timer = setInterval(function () {
39             var speed = parseInt(getStyle( oDiv, 'left' )) + 12;            // 步长
40             if ( speed > 800 ) {
41                 speed = 800;
42             }
43             oDiv.style.left = speed + 'px';
44             if ( speed == 800 ) {
45                 clearInterval( oDiv.timer );
46             }
47         }, 30);
48     };
49 
50     function getStyle ( obj, attr ) { return obj.currentStyle?obj.currentStyle[attr] : getComputedStyle( obj )[attr]; }
51 </script>
52 
53 </body>
54 </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         doMove ( oDiv, -12, 10 );
24 
25     };
26 
27     oBtn2.onclick = function () {
28         doMove ( oDiv, 12, 800 );
29     };
30 
31     function doMove ( obj, dir, target ) {
32         clearInterval( obj.timer );
33 
34         obj.timer = setInterval(function () {
35             var speed = parseInt(getStyle( obj, 'left' )) + dir;            // 步长
36             if ( speed > target && dir > 0 ) {        // 往前跑
37                 speed = target;
38             }
39             if ( speed < target && dir < 0 ) {        // 往后跑
40                 speed = target;
41             }
42             obj.style.left = speed + 'px';
43             if ( speed == target ) {
44                 clearInterval( obj.timer );
45             }
46 
47         }, 30);
48     }
49 
50     function getStyle ( obj, attr ) { return obj.currentStyle?obj.currentStyle[attr] : getComputedStyle( obj )[attr]; }
51 </script>
52 
53 </body>
54 </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, 'top', 12, 40 );
25 
26 };
27 
28 oBtn2.onclick = function () {
29     
30     doMove ( oDiv, 'top', 12, 500 );
31     
32 };
33 
34 function doMove ( obj, attr, dir, target ) {
35     
36     dir = parseInt(getStyle( obj, attr )) < target ? dir : -dir;
37     
38     clearInterval( obj.timer );
39     
40     obj.timer = setInterval(function () {
41         
42         var speed = parseInt(getStyle( obj, attr )) + dir;            // 步长
43         
44         if ( speed > target && dir > 0 ||  speed < target && dir < 0  ) {
45             speed = target;
46         }
47         
48         obj.style[attr] = speed + 'px';
49         
50         if ( speed == target ) {
51             clearInterval( obj.timer );
52         }
53         
54     }, 30);
55 }
56 
57 function getStyle ( obj, attr ) { return obj.currentStyle?obj.currentStyle[attr] : getComputedStyle( obj )[attr]; }
58 </script>
59 
60 </body>
61 </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 <div id="div1"></div>
15 
16 <script>
17 var oBtn1 = document.getElementById('btn1');
18 var oDiv = document.getElementById('div1');
19 
20 oBtn1.onclick = function () {
21     
22     // doMove ( oDiv, 'width', 34, 600 );
23     doMove ( oDiv, 'left', 12, 900, function () {
24         doMove ( oDiv, 'top', 34, 500 );
25     });
26 
27 };
28 
29 function doMove ( obj, attr, dir, target, endFn ) {
30     
31     dir = parseInt(getStyle( obj, attr )) < target ? dir : -dir;
32     
33     clearInterval( obj.timer );
34     
35     obj.timer = setInterval(function () {
36         
37         var speed = parseInt(getStyle( obj, attr )) + dir;            // 步长
38         
39         if ( speed > target && dir > 0 ||  speed < target && dir < 0  ) {
40             speed = target;
41         }
42         
43         obj.style[attr] = speed + 'px';
44         
45         if ( speed == target ) {
46             clearInterval( obj.timer );
47             
48             /*
49             if ( endFn ) {
50                 endFn();
51             }
52             */
53             endFn && endFn();
54             
55         }
56         
57     }, 30);
58 }
59 
60 function getStyle ( obj, attr ) { return obj.currentStyle?obj.currentStyle[attr] : getComputedStyle( obj )[attr]; }
61 </script>
62 
63 </body>
64 </html>

-让一排DIV往下掉.html

 1 <!DOCTYPE HTML>
 2 <html>
 3 <head>
 4     <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
 5     <title>无标题文档</title>
 6 
 7     <script src="miaov.js"></script>
 8     <script>
 9         window.onload = function () {
10             var str = '';
11             var len = 20;
12             var aDiv = document.getElementsByTagName('div');
13             var timer = null;
14             var num = 0;
15 
16             for ( var i=0; i<len; i++ ) {
17                 str += '<div style="width:50px; height:50px; background:red; position:absolute; top:0px; left:'+ i*60 +'px;"></div>';
18             }
19 
20             document.body.innerHTML = str;
21 
22             document.onclick = function () {
23                 clearInterval( timer );
24                 timer = setInterval( function (){
25                     doMove( aDiv[num], 'top', 23, 500 );
26                     num ++;
27                     if ( num === len ) {
28                         clearInterval( timer );
29                     }
30                 }, 100 );
31             };
32         };
33     </script>
34 
35 </head>
36 
37 <body>
38 </body>
39 </html>

 

posted @ 2015-11-12 11:53  名字不能缺  阅读(202)  评论(0)  编辑  收藏  举报