JS的运动1（从简单到复杂运动，从单一属性到多属性同时进行的运动过程分析）
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（从简单到复杂运动，从单一属性到多属性同时进行的运动过程分析）的更多相关文章
- vue.js 2.0实现的简单分页
<!DOCTYPE html> <html> <head> <meta charset="UTF-8" /> <title&g ...
- 玩转Node.js（四）-搭建简单的聊天室
玩转Node.js(四)-搭建简单的聊天室 Nodejs好久没有跟进了,最近想用它搞一个聊天室,然后便偶遇了socket.io这个东东,说是可以用它来简单的实现实时双向的基于事件的通讯机制.我便看了一 ...
- 用node.js从零开始去写一个简单的爬虫
如果你不会Python语言,正好又是一个node.js小白,看完这篇文章之后,一定会觉得受益匪浅,感受到自己又新get到了一门技能,如何用node.js从零开始去写一个简单的爬虫,十分钟时间就能搞定, ...
- 使用原生JS+CSS或HTML5实现简单的进度条和滑动条效果（精问）
使用原生JS+CSS或HTML5实现简单的进度条和滑动条效果(精问) 一.总结 一句话总结:进度条动画效果用animation,自动效果用setIntelval 二.使用原生JS+CSS或HTML5实 ...
- JavaScript面向对象(二)——成员属性、静态属性、原型属性与JS原型链
前 言 JRedu 上一篇博客中,我们介绍了JS中的面向对象,并详细的解释了this的指向问题.本篇博客,我们继续来学习JS的面向对象.来深入理解一下JavaScript OOP中的成员属性/方 ...
- JS Foo.getName笔试题解析，杂谈静态属性与实例属性，变量提升，this指向，new一个函数的过程
壹 ❀ 引 Foo.getName算是一道比较老的面试题了,大致百度了一下在17年就有相关文章在介绍它,遗憾的是我在19年才遇到,比较奇妙的是现在仍有公司会使用这道题.相关解析网上是有的,这里我站在 ...
- 如果需要将UIView的4个角全部都为圆角，做法相当简单，只需设置其Layer的cornerRadius属性即可
如果需要将UIView的4个角全部都为圆角,做法相当简单,只需设置其Layer的cornerRadius属性即可(项目需要使用QuartzCore框架).而若要指定某几个角(小于4)为圆角而别的不变时 ...
- JS 对象API之判断自有属性、共有属性
自有属性:对象实例私有的属性,只有该对象实例可用 共有属性:对象实例共有的属性,所有对象实例都可用 要判断对象实例的自有属性.共有属性:首先看看JS给我们提供的两个方法: 1.判断是否是对象实例的属性 ...
- js静态属性，实例属性，封装性，prototype，__proto__综合解析
原创作品,转载请注明来源,sogeisetsu,我的csdn上也有这篇文章csdn js静态属性,实例属性,封装性,prototype,__proto__综合解析 下面是我在写博客的源代码,您可以先不 ...
随机推荐
- C++ 线程安全的单例模式总结
什么是线程安全? 在拥有共享数据的多条线程并行执行的程序中,线程安全的代码会通过同步机制保证各个线程都可以正常且正确的执行,不会出现数据污染等意外情况. 如何保证线程安全? 给共享的资源加把锁,保证每 ...
- Django之使用中间件解决前后端同源策略问题
问题描述 前端时间在公司的时候,要使用angular开发一个网站,因为angular很适合前后端分离,所以就做了一个简单的图书管理系统来模拟前后端分离. 但是在开发过程中遇见了同源策略的跨域问题,页面 ...
- urllib爬虫模块
网络爬虫也称为网络蜘蛛.网络机器人,抓取网络的数据.其实就是用Python程序模仿人点击浏览器并访问网站,而且模仿的越逼真越好.一般爬取数据的目的主要是用来做数据分析,或者公司项目做数据测试,公司业务 ...
- I-string_2019牛客暑期多校训练营（第四场）
题意 当a != b且a != rev(b)则认为a串与b串不相等,rev(b)表示b串的反串,例如rev(abcd) = dcba 给出一个串求出该串所有不相等的子串个数 题解 先利用后缀数组求出s ...
- 洛谷P2331 [SCOI2005]最大子矩阵 DP
P2331 [SCOI2005]最大子矩阵 题意 : 这里有一个n*m的矩阵,请你选出其中k个子矩阵,使得这个k个子矩阵分值之和最大.注意:选出的k个子矩阵不能相互重叠. 第一行为n,m,k(1≤n≤ ...
- 北京2018网络赛 hihocoder#1828 : Saving Tang Monk II （BFS + DP +多开一维）
hihocoder 1828 :https://hihocoder.com/problemset/problem/1828 学习参考:https://www.cnblogs.com/tobyw/p/9 ...
- codeforces E. Mahmoud and Ehab and the function（二分+思维）
题目链接:http://codeforces.com/contest/862/problem/E 题解:水题显然利用前缀和考虑一下然后就是二分b的和与-ans_a最近的数(ans_a表示a的前缀和(奇 ...
- codeforces 794 C. Naming Company（贪心）
题目链接:http://codeforces.com/contest/794/problem/C 题意:有两个人每个人都有一个长度为n的字符串,两人轮流拿出一个字符串,放在一个长度为n的字符串的指定位 ...
- CodeM 资格赛 B 可乐 思维
分析: 我们假设购买一种可乐p瓶,我们可以得到期望:p*(m/n*a[i]+(n-m)/n*b[i]),由这个式子我们可以看出唯一的变量是i,所以可以遍历i找出式子的最大值 #include &l ...
- 淘淘购物系统 （Python）
#首页def tao_first(): t1 = '欢迎进入淘淘购物'.center(110) print(t1) print('~' * 130) t2 = '注册'.center(20) prin ...