让梦想照进现实，js 基础收尾工作-运动框架基本写法演化3

最新推荐文章于 2023-02-20 17:48:45 发布

爱生活，爱编程

最新推荐文章于 2023-02-20 17:48:45 发布

阅读量332

点赞数

分类专栏： javascript基础笔记大前端全栈之路

本文链接：https://blog.csdn.net/qq_15009739/article/details/86639959

版权

javascript基础笔记同时被 2 个专栏收录

83 篇文章 1 订阅

订阅专栏

大前端全栈之路

33 篇文章 0 订阅

订阅专栏

进一步演化就是可以给多个div 都让它移动的方法，那么这个时候，每个div 应该有自己的定时器变量

也就是将全局变量转成对象的属性，让他们互相不影响

<!DOCTYPE html>
<html>
<head>
	<title>action</title>
	<meta charset="utf-8">

	<style type="text/css">
			#box{
				width: 100px;
				height: 100px;
				background-color: red;
				position: absolute;
				left: 0;
				top:200px;
			}
			#box4{
				width: 100px;
				height: 100px;
				background-color: red;
				position: absolute;
				left: 0;
				top:600px;
			}
		

			/*
				一旦你指定了定位布局，就必须将left 和top写上，这样能避免一些莫名其妙的问题
				也就是不用它的默认值
			*/
			#endLine{
				width:0px;
				height: 500px;
				position: absolute;
				border: 1px solid black;
				top:0;
				left: 500px;
			}


	</style>

</head>
<body>
		<h1>运动框架的演变</h1>
		<button id ="oBtn">move</button>
		<button id ="oBtn2">move2</button>


		<div id="box">
			
		</div>

		<div id="box4">
			
		</div>
	

		<div id="endLine">
			
		</div>

		<script type="text/javascript">

				// 添加onclick event(测试过了，这个写法没问题，又复习了一遍！复习多了，自然就会写了！)
				function addListener(obj,enentName,callback){
						if(obj.addEventListener){
							obj.addEventListener(enentName,callback);
						}else{
								// ie explorer
							obj.attachEvent('on'+ attachEvent,callback);		
						}
				}


				// 兼容写法， 一般问题，按照一般方式对待，特殊问题，特殊对待！ 
				//要有两手准备！（普遍性+ 特殊性）（矛盾普遍性，矛盾特殊性）
				function getStyle(obj,attr){
					if(window.getComputedStyle){
						// 在sublime 中，大凡方法都是蓝绿色的，很舒服这个颜色
						return window.getComputedStyle(obj,null)[attr];		
					}else{
						// 由于attr 是个变量，所以呢， 不能用obj.currentStyle.attr 的方式
						// 用如下方式
						return obj.currentStyle[attr];
						// ie explorer IE 非常讨厌，都是为了兼容它
					}
				}

				// 下一步就是为多个div 都添加运动操作，那你就要一些全局变量做成属性了！、
				


				window.onload = function(){
					var oDiv = document.getElementById('box');
					var oDiv4 = document.getElementById('box4');
					var oBtn = document.getElementById('oBtn');
					var oBtn2 = document.getElementById('oBtn2');
			

					function move2(obj,target,speed){
					
						clearInterval(obj.timer);

						// 1,在开启定时器之前，首先要判断一下，确定speed 的正负
							// 11 得到当前值
							var currentLeft =parseInt(getStyle(obj,'left')) ;
							if(currentLeft>target){
								// 从右往左移动
								speed = -speed;
							}else{
								speed = Math.abs(speed);
							} 								



						obj.timer = setInterval(function(){
							
							var left = parseInt(getStyle(obj,'left')) ;
	
							if((speed>0 &&left>=target)||(speed<0 &&left<=target)){
									//防止超出边界
										obj.style.left = target+"px";
										clearInterval(obj.timer);
							}else{
								// 若没到达目的地，则继续向右走
										obj.style.left = left + speed + "px";
							}
						
						},20);
					}

					

					// 往左移动
					function dealClick (){
						
							move2(oDiv4,500,10);
							move2(oDiv,500,20);

						
					}
					addListener(oBtn,'click',dealClick);

						oBtn2.onclick = function(){
							move2(oDiv4,0,10);
						}

				}



			
		</script>

</body>

</html>

但是我们这个版本还是很low ,只能左右移动，那么我想上下，变宽变高呢？，我们就得继续重构！放下一篇吧

爱生活，爱编程

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
让梦想照进现实，js 基础收尾工作-运动框架基本写法演化3

进一步演化就是可以给多个div 都让它移动的方法，那么这个时候，每个div 应该有自己的定时器变量也就是将全局变量转成对象的属性，让他们互相不影响&lt;!DOCTYPE html&gt;&lt;html&gt;&lt;head&gt; &lt;title&gt;action&lt;/title&gt; &lt;meta charset="utf-8"&gt; &
复制链接

扫一扫

专栏目录