js定时器应用实例

定时器应用实例

定时器知识点

github网址

github网址，定时器的应用完整代码

实现效果

核心代码

<script type="text/javascript">
 		window.onload = function(){
 			/*
 			* 参数：obj--要执行的动画
 			* 参数 attr 修改执行动画的样式，top、left、width height...
 			* 参数 target - 执行动画的目标位置
 			* 参数：speed -- 移动的速度
 			* 参数 callback - 回调函数，动画执行完毕之后执行
 			*/
 			function move(obj,attr,target,speed,callback){
 				//点击按钮以后,使box1移动（left值减小）
 				// 关闭上一个定时器
	 			clearInterval(obj.timer);

 				// 获取box1当前的位置
	 			var current = parseInt(getComputedStyle(obj,null)[attr]);
				// console.log(current);
				if(current > target){
					speed = -speed;
					// console.log('speed',speed);
				}
 				// 设置定时器
 				// 向执行动画的对象中添加一个timer属性，用来保存自己的定时器标识
 				obj.timer = setInterval(function(){
 					var oldValue = parseInt(getComputedStyle(obj,null)[attr]);
 					var newValue =  oldValue + speed;
 				
 					// 如果speed大于0，则向右移动，最大不能超过800；反之，向左移动，最小不能小于0
 					if((speed >0 && newValue > target) || (speed<0 && newValue < target)){
 						newValue = target;
 					}
 					obj.style[attr] = newValue + 'px';
 					// 当元素运动到target时，则停止
	 				if(newValue == target){
	 					clearInterval(obj.timer);
	 					// 动画执行完毕，调用回调函数
	 					callback && callback();
	 				}
 				},30);
 			}
 			/*-----------------------------------------*/
 			var box1 = document.getElementById('box1');
 			var box2 = document.getElementById('box2');

 			var btn01 = document.getElementById('btn01');
 			var btn02 = document.getElementById('btn02');
 			var btn03 = document.getElementById('btn03');
 			var btn04 = document.getElementById('btn04');


 			var speed = 19;
 			var timer;
 			btn01.onclick = function(){
 				//点击按钮以后,使box1向右移动（left值增大）
 				move(box1,'left',800,speed);
 			};

 			btn02.onclick = function(){
 				move(box1,'left',0,speed);
 			};

 			btn03.onclick = function(){
 				move(box2,'left',800,10);
 			};

 			btn04.onclick = function(){
 				// move(box2,'width',800,10);
 				move(box2,'width',500,10,function(){
 					alert('width end');
 					move(box2,'height',500,10,function(){
 						alert('height end');
 					});
 				});
 			};
 		};
	</script>