很好玩的方块移动变形-定时器

最新推荐文章于 2021-04-26 22:37:23 发布

ZzyUHan

最新推荐文章于 2021-04-26 22:37:23 发布

阅读量554

点赞数 1

分类专栏： js基础

本文链接：https://blog.csdn.net/ZzyUHan/article/details/81437264

版权

js基础专栏收录该内容

10 篇文章 0 订阅

订阅专栏

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title></title>
		<style type="text/css">
			*{
				margin: 0;
				padding: o;
			}
			#box1{
				width: 20px;
				height: 20px;
				background-color: pink;
				left: 0;
				position: absolute;
			}
			
			#box2{
				width: 20px;
				height: 20px;
				margin-top: 40px;
				background-color: pink;
				left: 0;
				position: absolute;
			}
			
			#box3{
				width: 1000px;
				height: 90px;
				background-color: greenyellow;
				border-top: 10px black solid;
				margin-top: 700px;
			}
			
			#box9{
				width: 1000px;
				height: 800px;
				background-color: ghostwhite;
				border: 10px black solid;
				position: absolute;
			}
			
			
		</style>
		<script type="text/javascript" src="js/setInterval.js" ></script>
		<script type="text/javascript">
			window.onload = function(){
				var box1 = document.getElementById("box1");
				var box2 = document.getElementById("box2");
				var box3 = document.getElementById("box3");
				
				var btn1 = document.getElementById("btn1");
				var btn2 = document.getElementById("btn2");
			    var btn3 = document.getElementById("btn3");
			    var btn4 = document.getElementById("btn4");
				var btn5 = document.getElementById("btn5");
				
				//点击btn1以后，box1向右移动（left值增大）
				btn1.onclick = function(){
					move(box1 , 980 , 1 , "left");
				};
				
				//点击btn5以后，box1向左移动
				btn2.onclick = function(){
					move(box1 , 0 , 1 , "left");
				};
				
				btn4.onclick = function(){
					move(box2 , 980 , 1);
				};
				
				//测试按钮
				btn5.onclick = function(){
					//move(box2 , 600 , 1 , "width");
					//move(box2 , 600 , 1 , "height");
					move(box2 , 600 , 1 , "top" , function(){
						move(box2 , 600 , 1 , "width" , function(){
							move(box2 , 600 , 1 , "height" , function(){
								move(box2 , 0 , 1 , "top" , function(){
									move(box2 , 20 , 1 , "width" , function(){
										move(box2 , 20 , 1 , "height" , function(){
											
					                    });
									});
					            });
					        });
					    });
					});
				};
				//暂停按钮
				btn3.onclick = function(){
					clearInterval(box1.timer);
				};
			};
		</script>
		
	</head>
	<body>
		<button id="btn1">方向右移动</button>
		<button id="btn2">方向左移动</button>
		<button id="btn3">方停止移动</button>
		<button id="btn4">块向右移动</button>
		<button id="btn5">测试按钮</button>
		<br /><br />
		<div id="box9">
			<div id="box1">方</div>
			<div id="box2">块</div>
			<div id="box3">信息显示区域</div>
		</div>
	</body>
</html>

js代码

//创建一个函数保存
			//创建参数：
			//        obj:执行对象
			//        target：执行的目标位置        
			//        v:移动速度
			//        manner:要执行对象的样式，比如left、top、width、height...
			//        callback:回调函数，将会在对象执行完毕后执行
			function move(obj , target , v , manner , callback){
					
					//关闭该其他定时器
					clearInterval(obj.timer);
					
					//获取box初始当前的left值,parseInt用于取出合法数字
					var oldstart = parseInt(getStyle(obj , manner));
					
					//判断速度的正负值
					//向右移动为正，向左移动为负
					if(oldstart > target){
						//目标位置在当前位置的左边，则速度应为负值
						v = -v;
					}
					
					//开启一个定时器执行动画效果
					obj.timer = setInterval(function(){
						
					    //获取box1当前的left值,parseInt用于取出合法数字
					    var oldbox = parseInt(getStyle(obj , manner));
					     
					    //在旧值上增加
					    var newbox = oldbox + v;
					    
					    //判断newbox是否大于target
					    if((v >0 && newbox > target) || (v <0 && newbox < target)){
					    	newbox = target;
					    }
					    
					    //将新值设置给box
					    obj.style[manner] = newbox +"px";
					    
					    //当方块移动到box2边缘就停止移动
					    if(newbox == target){
					    	clearInterval(obj.timer);
					    	//对象执行完毕，调用回调函数
					    	callback&&callback();
					    }
					    
					},10);
			};
			
			//定义一个函数，用来获取指定元素的当前样式
			//参数：
			//     obj 要获取样式的元素
			//     name 要获取的样式名
			function getStyle(obj , name){
				if(window.getComputedStyle){
					//正常浏览器具有getComputedStyle()方法
					return getComputedStyle(obj , null)[name];
				}else{
					//IE8没有getComputedStyle()方法
					return obj.currentStyle[name];
				}
			}