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

最新推荐文章于 2020-11-24 11:11:06 发布

爱生活，爱编程

最新推荐文章于 2020-11-24 11:11:06 发布

阅读量322

点赞数

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

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

版权

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

83 篇文章 1 订阅

订阅专栏

大前端全栈之路

33 篇文章 0 订阅

订阅专栏

<!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;
			}

			/*
				一旦你指定了定位布局，就必须将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="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 非常讨厌，都是为了兼容它
					}
				}

				window.onload = function(){
					var oDiv = document.getElementById('box');
					var oBtn = document.getElementById('oBtn');
					var oBtn2 = document.getElementById('oBtn2');
					var timer = null;
					var speed = 10;

					function move(target){
						console.log(target)
						// alert('click');
						clearInterval(timer);

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



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

						
						},20);
					}

					// 往左移动
					function dealClick (){
							move(500);
					}
					addListener(oBtn,'click',dealClick);

						oBtn2.onclick = function(){
							move(0);
						}

				}



			
		</script>

</body>

</html>

我现在就是修正为有两个按钮了，可以向左移动，也可以向又移动！

只要传递一个目标值就行了！

我们发现有好多重复，所以还要重构下！要不然显得我们太low 了

感觉代码简洁了好多，理解起来还行吧！

这是二次递进，我估计得递进10 来次，就是改来该去！

爱生活，爱编程

关注

0
点赞
踩
0

收藏

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

&lt;!DOCTYPE html&gt;&lt;html&gt;&lt;head&gt; &lt;title&gt;action&lt;/title&gt; &lt;meta charset="utf-8"&gt; &lt;style type="text/css"&gt; #box{ width: 100px; hei
复制链接

扫一扫