定时器的应用

  1 <!DOCTYPE html>
  2 <html>
  3 <head>
  4     <meta charset="UTF-8">
  5     <title></title>
  6 </head>
  7 <!--引入外部文件
  8 <script type="text/javascript" src="js/tools.js"></script>
  9 -->
 10 <script type="text/javascript">
 11 //获取元素样式
 12 function getStyle(obj,name)
 13 {
 14   if(window.getComputedStyle)
 15   return getComputedStyle(obj,null)[name];
 16   else
 17   return obj.currrntStyle[name];
 18 }
 19 
 20  //var timer;
 21  /*
 22   目前我们的定时器的标识由全局变量timer保存，
 23   所有的执行正在执行的定时器都在这个变量中保存
 24  */
 25 function move(obj,attr,target,speed,callback)
 26 {
 27   /*
 28   创建一个可以执行简单动画的函数
 29   参数
 30   obj 要执行动画的对象
 31   attr 要执行动画的样式 比如 height top width left
 32   target 执行动画的目标位置
 33   speed 移动的速度
 34   callback 回调函数，这个函数将会在动画执行完毕以后执行
 35 
 36   在开启一个定时器前，如果前面已经开过定时器了把已有的定时器先关闭，
 37   为了保证同一时间只能开启一个定时器，使方块速度恒定
 38   */
 39   clearInterval(obj.timer);
 40   //获取元素目前的位置
 41   var current = parseInt(getStyle(obj,attr));
 42   if(current>target)
 43   speed=-speed;
 44   //向执行动画的对象中添加一个timer属性，用来保存它自己的定时器的标识
 45   obj.timer=setInterval(function(){
 46   var oldValue=parseInt(getStyle(obj,attr));
 47   var newValue=oldValue+speed;
 48   if(speed<0&&newValue<target || speed>0&&newValue>target)
 49   newValue=target;
 50   obj.style[attr]=newValue+"px";
 51 
 52   if(newValue==target){
 53   clearInterval(obj.timer);
 54   //动画执行完毕后，调用回调函数，只会调用一次，判断如果有callback就执行
 55   callback && callback();
 56   }
 57   },10);
 58 }
 59 window.onload=function()
 60 {
 61   var box1=document.getElementById("box1");
 62   var button1=document.getElementById("button1");
 63   var timer;
 64   button1.onclick=function(){
 65   move(box1,"left",500,6);
 66   };
 67 
 68   var button2=document.getElementById("button2");
 69 
 70   button2.onclick=function(){
 71   move(box1,"left",0,5);
 72   };
 73   var box2=document.getElementById("box2");
 74   var button3=document.getElementById("button3");
 75   button3.onclick=function(){
 76   move(box2,"left",500,10);
 77   };
 78   var button4=document.getElementById("button4");
 79   button4.onclick=function(){
 80    move(box2,"height",500,10);
 81    move(box1,"width",500,10,function(){
 82    alert("动画执行完毕~(≧▽≦)/~啦啦啦！！！");
 83    });
 84   };
 85 };
 86   </script>
 87 <style type="text/css">
 88     *{
 89     margin:0px;
 90     padding:0px;
 91     }
 92     #box1{
 93     width:100px;
 94     height:100px;
 95     background-color:skyblue;
 96     position:absolute;
 97     //IE没有指定的值 返回auto 其他浏览器返回0
 98     left:0px;
 99     }
100     #box2{
101     width:100px;
102     height:100px;
103     background-color:yellow;
104     position:absolute;
105     left:0px;
106     top:200px;
107     }
108 </style>
109 <body>
110 <button id="button1">点击按钮以后box1向右移动</button>
111 <button id="button2">点击按钮以后box1向左移动</button>
112 <button id="button3">点击按钮以后box2向右移动</button>
113 <button id="button4">测试按钮</button>
114 <br><br>
115 <div id="box1"></div>
116 <div id="box2"></div>
117 <div style="0px;height:1000px;border-left:1px black solid;
118 position:absolute;top:0px;left:500px;"></div>
119 </body>
120 </html>