js运动原理

运动基础

在js中，让一个元素动起来的最简单的方式，就是点击按钮，让元素移动。下面是一个简单的案例：(下面几个案例的的html和css都是采用这个为例)

<!DOCTYPE html>

<html lang="zh">

<head>

	<title></title>

	<style>

		#d1 {

			width: 100px;

			height: 100px;

			background-color: red;

			position: absolute;

			top:100px;

			left:200px;

		}

	</style>

</head>

<body>

	<button id="btn">点击移动</button>

	<div id="d1"></div>

</body>

</html>

当点击按钮之后，让一个元素动起来，并且当偏移量（元素到达页面左界的具体）达到500px时停止移动。

// 需求分析:点击按钮,让div动起来

	// 获取元素

	let oBtn = document.getElementById("btn");

	let oDiv = document.getElementById("d1");

	// 声明一个变量用来储存计时器

	let iTimer = null;

	// 点击按钮元素一直运动

	oBtn.onclick = function(){

		iTimer = setInterval(function(){

			// 点击按钮之后，让元素的位置在当前的基础上每次增加10px，

			//当移动距离达到500时停止运动

			if(oDiv.offsetLeft === 500){

				// 当元素的左偏移量(元素距离页面窗口左边的距离)===500px时,停止移动

				clearInterval(iTimer);

			}else{

				oDiv.style.left = oDiv.offsetLeft + 10 + "px";

			}

		},30);

	};

在上面的代码中，存在两个非常严重的问题

  • 当多次点击按钮时，速度会越来越快
  • 当每次移动的距离不能被500整除时，元素将不会停止。

    我们先来解决第一个问题（第二个问题在运动的封装中进行详细讲解）：

    为什么速度会越来越快？原因是每点击一次按钮，就会触发一次单击事件，计时器就会发生累加，导致元素的移动速度越来越快。

    解决方法：在每次开始运动之前先清除一次定时器。
oBtn.onclick = function(){

		clearInterval(iTimer);

		iTimer = setInterval(function(){}

（只需要在计时器之前加一句清除计时器，其它代码与上面完全一样，不再进行重复）

总结：让一个元素动起来的基本流程是什么？下面做一个简单总结：

  • 问题的：匀速运动的元素没有办法进行在不整除的情况下在临界点停止

    （下一篇博客中的运动的封装会解决此问题）
  • 上述代码中，整个过程大致分为三个步骤：
    • 清除定时器，确保只有一个定时器在执行
    • 开启定时器
    • 开始运动。但必须判断停止条件。

（因内容较多，会分开多次进行。从浅到深，徐徐渐进）

JS的运动1（从简单到复杂运动，从单一属性到多属性同时进行的运动过程分析）的更多相关文章

  1. vue.js 2.0实现的简单分页

    <!DOCTYPE html> <html> <head> <meta charset="UTF-8" /> <title&g ...

  2. 玩转Node.js（四）-搭建简单的聊天室

    玩转Node.js(四)-搭建简单的聊天室 Nodejs好久没有跟进了,最近想用它搞一个聊天室,然后便偶遇了socket.io这个东东,说是可以用它来简单的实现实时双向的基于事件的通讯机制.我便看了一 ...

  3. 用node.js从零开始去写一个简单的爬虫

    如果你不会Python语言,正好又是一个node.js小白,看完这篇文章之后,一定会觉得受益匪浅,感受到自己又新get到了一门技能,如何用node.js从零开始去写一个简单的爬虫,十分钟时间就能搞定, ...

  4. 使用原生JS+CSS或HTML5实现简单的进度条和滑动条效果（精问）

    使用原生JS+CSS或HTML5实现简单的进度条和滑动条效果(精问) 一.总结 一句话总结:进度条动画效果用animation,自动效果用setIntelval 二.使用原生JS+CSS或HTML5实 ...

  5. JavaScript面向对象(二)——成员属性、静态属性、原型属性与JS原型链

      前  言 JRedu 上一篇博客中,我们介绍了JS中的面向对象,并详细的解释了this的指向问题.本篇博客,我们继续来学习JS的面向对象.来深入理解一下JavaScript OOP中的成员属性/方 ...

  6. JS Foo.getName笔试题解析，杂谈静态属性与实例属性，变量提升，this指向，new一个函数的过程

     壹 ❀ 引 Foo.getName算是一道比较老的面试题了,大致百度了一下在17年就有相关文章在介绍它,遗憾的是我在19年才遇到,比较奇妙的是现在仍有公司会使用这道题.相关解析网上是有的,这里我站在 ...

  7. 如果需要将UIView的4个角全部都为圆角，做法相当简单，只需设置其Layer的cornerRadius属性即可

    如果需要将UIView的4个角全部都为圆角,做法相当简单,只需设置其Layer的cornerRadius属性即可(项目需要使用QuartzCore框架).而若要指定某几个角(小于4)为圆角而别的不变时 ...

  8. JS 对象API之判断自有属性、共有属性

    自有属性:对象实例私有的属性,只有该对象实例可用 共有属性:对象实例共有的属性,所有对象实例都可用 要判断对象实例的自有属性.共有属性:首先看看JS给我们提供的两个方法: 1.判断是否是对象实例的属性 ...

  9. js静态属性，实例属性，封装性，prototype，__proto__综合解析

    原创作品,转载请注明来源,sogeisetsu,我的csdn上也有这篇文章csdn js静态属性,实例属性,封装性,prototype,__proto__综合解析 下面是我在写博客的源代码,您可以先不 ...

随机推荐

  1. 一文搞懂Python中的所有数组数据类型

    关于我 一个有思想的程序猿,终身学习实践者,目前在一个创业团队任team lead,技术栈涉及Android.Python.Java和Go,这个也是我们团队的主要技术栈. Github:https:/ ...

  2. The used SELECT statements have a different number of columns？？？

    今天我们组就我一个人留守在这里修复bug了,有点小悲伤啊,他们都问我能不能hold得住啊,我当然能hold得住啊: 在看一个入库的存储过程中,在数据库运行的时候是没问题的,项目已启动,进行入库操作就是 ...

  3. python+unittest框架第六天unittest之优化测试报告

    今天的内容主要是,用第三方的HTMLRUNner 第三方的报告来优化之前第五天批量执行案例的测试报告.案例的部分看第五天的批量执行笔记~ HTMLRUNner他可以生成更美观的测试报告,基于前辈造的车 ...

  4. windows下 ionic 打包app --以安卓版本为例

    环境安装 1.nodejs 安装版本5.7,尽量不要安装太新的版本,因为可能会出现兼容性问题,一开始本人安装的是6.+的版本,后来出现问题的,马上换回5.7的,问题就不会出现了. 安装教程网上教程很多 ...

  5. 迁移桌面程序到MS Store（10）——在Windows S Mode运行

    首先简单介绍Windows 10 S Mode,Windows在该模式下,只能跑MS Store里的软件,不能通过其他方式安装.好处是安全有保障,杜绝一切国产流氓软件.就像iOS一样,APP进商店都需 ...

  6. 通过Web安全工具Burp suite找出网站中的XSS漏洞实战(二)

    一.背景 笔者6月份在慕课网录制视频教程XSS跨站漏洞 加强Web安全,里面需要讲到很多实战案例,在漏洞挖掘案例中分为了手工挖掘.工具挖掘.代码审计三部分内容,手工挖掘篇参考地址为快速找出网站中可能存 ...

  7. ValueError: Error when checking input: expected conv2d_1_input to have 4 dimensions, but got array with shape (60000, 28, 28)

    报错 Traceback (most recent call last): File "D:/PyCharm 5.0.3/WorkSpace/3.Keras/3.构建各种神经网络/3.CNN ...

  8. Prim && Kruskal

    Electrification Plan Prim #include<iostream> #include<cstring> using namespace std; cons ...

  9. lightoj 1245 Harmonic Number (II)（简单数论）

    题目链接:http://www.lightoj.com/volume_showproblem.php?problem=1245 题意:求f(n)=n/1+n/2.....n/n,其中n/i保留整数 显 ...

  10. 第 15 篇：优化博客功能的细节，提升使用体验—— HelloDjango 系列教程

    作者:HelloGitHub-追梦人物 文中涉及的示例代码,已同步更新到 HelloGitHub-Team 仓库 在之前的系列教程中,我们已经实现了:文章的发布.展示.评论等功能,可能认真的小伙伴已经 ...