JavaScript基础12——运动
运动原理
setInterval(function(){
obox.style.left = obox.offsetLeft+10+"px";
},30)
边界处理
var timer;
timer = setInterval(function(){
if(obox.offsetLeft>=200){
clearInterval(timer);
}else{[
obox.style.left = obox.offsetLeft+10+"px";
}
},30)
我们先来实现一个简单的功能，当我们点击按钮之后，让一个元素动起来。并且到达500的边界之后立刻停止下来
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<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>
<script>
// 点击按钮,让div横向的运动起来 // 1. 获取元素
let oBtn = document.getElementById('btn');
let oDiv = document.getElementById('d1');
let iTimer = null;
// 点击按钮,让元素一直运动 ,需要使用到的知识点:定时器
oBtn.onclick = ()=>{ iTimer = setInterval(()=>{
// 点击按钮之后,让div的位置在当前的基础之上每次增加10px的距离
// oDiv.style.left = oDiv.offsetLeft + 10 + 'px'; // 虽然此代码可以让div动起来,但是我们需要div在运动之后到达某个边界就立刻停止,所以需要将此句代码改为一个判断
if (oDiv.offsetLeft === 500) {
// 清除定时器
clearInterval(iTimer);
}else { // 没有到达边界才能继续运动
oDiv.style.left = oDiv.offsetLeft + 10 + 'px';
}
},30); };
</script>
</html>
在上面的代码中，我们点击按钮之后，元素已经可以直接进行移动，但是却存在一个问题，什么问题呢？
当我们点击按钮之后，元素始终以10px的匀速进行运动，到达500的临界然后停止。 但是我们的问题是，速度可能会变，例如将速度变为7px，就不能够
准确的到达500的临界值。
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<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>
<script>
// 点击按钮,让div横向的运动起来 // 1. 获取元素
let oBtn = document.getElementById('btn');
let oDiv = document.getElementById('d1');
let iTimer = null;
// 点击按钮,让元素一直运动 ,需要使用到的知识点:定时器
oBtn.onclick = ()=>{ iTimer = setInterval(()=>{
// 点击按钮之后,让div的位置在当前的基础之上每次增加10px的距离
// oDiv.style.left = oDiv.offsetLeft + 10 + 'px'; // 虽然此代码可以让div动起来,但是我们需要div在运动之后到达某个边界就立刻停止,所以需要将此句代码改为一个判断
if (oDiv.offsetLeft === 500) {
// 清除定时器
clearInterval(iTimer);
}else { // 没有到达边界才能继续运动
oDiv.style.left = oDiv.offsetLeft + 7 + 'px'; // 一旦将每次的移动距离变为7px ,那么将不能停的下来.元素会一直运动
}
},30); };
</script>
</html>
出现这种情况的原因是因为运动的临界值必须能够被运动的速度(也就是oDiv.offsetLeft + 7 + 'px',表示每次执行移动的距离)整除。
上面的代码当中， 因为临界值不能够被速度整除，所以，最终元素始终达到不了临界值，那么元素就没有办法在到达临界值时停止。
同时在上面的代码中的另外一个问题是，当我们每点击一次运动按钮，元素的速度就会变得更快，原因很简单，就是我们设置的定时器发生了累加。
那么该如何解决定时器累加的问题呢？
我们可以在每次开始运动之前先清除一次定时器。
oBtn.onclick = ()=>{
/*
* 为了防止定时器累加，在每次开始定时器之前，先清楚掉一个定时器
* */
clearInterval(iTimer);
iTimer = setInterval(()=>{
// 点击按钮之后,让div的位置在当前的基础之上每次增加10px的距离
// oDiv.style.left = oDiv.offsetLeft + 10 + 'px'; // 虽然此代码可以让div动起来,但是我们需要div在运动之后到达某个边界就立刻停止,所以需要将此句代码改为一个判断
if (oDiv.offsetLeft === 500) {
// 清除定时器
clearInterval(iTimer);
}else { // 没有到达边界才能继续运动
oDiv.style.left = oDiv.offsetLeft + 7 + 'px'; // 一旦将每次的移动距离变为7px ,那么将不能停的下来.元素会一直运动
}
},30);
};
圆周运动demo
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Document</title>
<style>
.box{width:20px;height:20px;background: red;position: absolute;lefT:0;top:0;border-radius: 50%;}
</style>
</head>
<body>
<!-- <div class="box"></div> -->
</body>
<script>
var obox = document.querySelector(".box");
var t;
var speed = 10;
var target = 360;
var iNow = 0;
var r = 200; // 圆周运动
document.onclick = function(){
clearInterval(t);
t = setInterval(() => {
if(target <= iNow){
clearInterval(t);
}else{
iNow += speed;
var div = document.createElement("div");
div.className = "box";
document.body.appendChild(div); // 利用三角函数计算left和top
div.style.left = Math.cos( Math.PI/180*iNow ) * r + 200 + "px";
div.style.top = Math.sin( Math.PI/180*iNow ) * r + 200 + "px";
}
}, 30);
} </script>
</html>
多元素缓冲运动事件委托demo
<!DOCTYPE html>
<html>
<head>
<meta charset = "utf-8">
<title></title>
<style>
.cont {width: 1000px;height: 600px;border: 1px solid #000;box-sizing: border-box;position: relative;}
div div {width: 100px;height: 100px;position: absolute;left: 0;top: 10px;background-color: lightcoral;}
</style>
</head>
<body>
<div class="cont">
<div class="box1" >1</div>
<div class="box2">2</div>
<div class="box3">3</div>
<div class="box4">4</div>
<div class="box5">5</div>
</div>
</body>
<script>
var ocont = document.querySelector(".cont");
var abox = document.querySelectorAll("div div"); document.onclick = eventFn(abox,function(){
var a = this; move(a,{top:490},function(){
// move(a,{left:800},function(){
// move(a,{top:10},function(){
// move(a,{left:0})
// })
// })
move(a,{left:800,top:300},function(){})
})
}) // 多元素运动
function move(ele,obj,fn){
clearInterval(ele.t);
ele.t = setInterval(() => {
var onoff = true;
for(var i in obj){
var pos = parseInt(getComputedStyle(ele,false)[i]);
var speed = (obj[i]-pos)/10;
speed = speed > 0 ? Math.ceil(speed) : Math.floor(speed);
if(pos != obj[i]){
onoff = false;
}
ele.style[i] = pos + speed + "px";
if(onoff == true){
clearInterval(ele.t);
fn && fn();
}
}
}, 30);
} // 事件委托：
function eventFn(ele,cb){
return function(eve){
var e = eve || window.event;
var target = e.target || e.srcElement;
for(var j = 0;j <ele.length;j++){
if(target == ele[j]){
cb.bind(target)();
}
}
}
}
</script>
</html>
抛物线demo
<!DOCTYPE html>
<html>
<head>
<meta charset = "utf-8">
<title></title>
<style>
html body {margin: 0;padding: 0;}
.box{width: 800px;height: 500px;position: relative;border: 1px solid #000;}
#ball{width: 50px;height: 50px;background-color: paleturquoise;border: 1px solid #000;border-radius: 50%;position: absolute;left: 0;top: 0;}
</style>
</head>
<body>
<div class="box">
<div id="ball"></div>
</div>
</body>
<script>
var obox = document.querySelector(".box");
var oball = document.querySelector("#ball");
var index = 0;
var tSpeed = 5;
var lSpeed = 20;
var t = null;
var maxTop = obox.offsetHeight - oball.offsetHeight;
var maxLeft = obox.offsetWidth - oball.offsetWidth;
var g = 1;
onload = function(){
clearInterval(t);
t = setInterval(function(){
if(index%5 == 0){
tSpeed += g;
}
if(maxTop-oball.offsetTop < tSpeed){
oball.style.top = maxTop+"px";
tSpeed = -Math.round(tSpeed*0.7);
if(Math.abs(tSpeed) <= 1){
clearInterval(t)
}
}else{
oball.style.top = oball.offsetTop + tSpeed +"px";
oball.style.left = oball.offsetLeft + lSpeed +"px";
}
if(oball.offsetLeft > maxLeft){lSpeed = -lSpeed}
if(oball.offsetLeft < 0){lSpeed = -lSpeed}
},30) }
</script>
</html>
重力运动demo
<!DOCTYPE html>
<html>
<head>
<meta charset = "utf-8">
<title></title>
<style>
.ball {width: 50px;height: 50px;border-radius: 50%;background-color: darkorange;position: absolute;top: 0;}
.wall {width: 1000px;border: 1px solid #000;position: absolute;top: 300px;}
</style>
</head>
<body>
<div class="ball"></div>
<div class="wall"></div>
</body>
<script> onload = function(){
var oball = document.querySelector(".ball");
var owall = document.querySelector(".wall");
var speed = 6;
var index = 0;
var g = 2;
var t = null;
var maxTop = owall.offsetTop - oball.offsetHeight;
t = setInterval(function(){
index++;
if(index%6 == 0){
speed += g;
}
if(maxTop - oball.offsetTop <= speed){
oball.style.top = maxTop + "px";
speed = -Math.round(speed*0.7);
if(Math.abs(speed) <= 1){
clearInterval(t);
}
}else{
oball.style.top = oball.offsetTop + speed + "px";
}
},30)
} </script>
</html>
JavaScript基础12——运动的更多相关文章
- JavaScript基础12——js的方法重载
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title> ...
- JavaScript 基础入门11 - 运动框架的封装
目录 JavaScript 运动原理 运动基础 简单运动的封装 淡入淡出 不同属性的设置 多属性值同时运动 运动回调,链式运动 缓冲运动 加入缓冲的运动框架 案例1 多图片展开收缩 运动的留言本 Ja ...
- javascript 基础2第12节
1. <html> <head> <title>javascript基础</title> </head> <body> 1.Nu ...
- JavaScript基础视频教程总结（091-100章）
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title> ...
- JavaScript基础入门06
目录 JavaScript 基础入门06 Math 对象 Math对象的静态属性 Math对象的静态方法 指定范围的随机数 返回随机字符 三角函数 Date对象 基础知识 日期对象具体API 构造函数 ...
- 前端之JavaScript基础
前端之JavaScript基础 本节内容 JS概述 JS基础语法 JS循环控制 ECMA对象 BOM对象 DOM对象 1. JS概述 1.1. javascript历史 1992年Nombas开发出C ...
- 一步步学习javascript基础篇（3）：Object、Function等引用类型
我们在<一步步学习javascript基础篇(1):基本概念>中简单的介绍了五种基本数据类型Undefined.Null.Boolean.Number和String.今天我们主要介绍下复杂 ...
- javascript基础01
javascript基础01 Javascript能做些什么? 给予页面灵魂,让页面可以动起来,包括动态的数据,动态的标签,动态的样式等等. 如实现到轮播图.拖拽.放大镜等,而动态的数据就好比不像没有 ...
- 【Java EE 学习 31】【JavaScript基础增强】【Ajax基础】【Json基础】
一.JavaScript基础增强 1.弹窗 (1)使用window对象的showModelDialog方法和showModelessDialog方法分别可以弹出模式窗口和非模式窗口,但是只能在IE中使 ...
随机推荐
- TCMalloc - 基本流程
SizeMap tcmalloc通过classid将不同的小对象映射到不同的对象桶中,sizemap记录了一些对象大小和对象class的映射以及反向映射,除此之外,还记录了一些ThreadCache与 ...
- 【搬运工】RHEL6.5 移植使用CentOS 的YUM 步骤
转载地址:http://www.cnblogs.com/rchen98/p/6056469.html 问题:使用 Red Hat Enterprise Linux Server(RHEL) yum安装 ...
- Dubbo面试踩坑
1.Dubbo支持哪些协议,每种协议的应用场景,优缺点? dubbo: 单一长连接和NIO异步通讯,适合大并发小数据量的服务调用,以及消费者远大于提供者.传输协议TCP,异步,Hessian序列化: ...
- json文件 乱码问题 根本解决办法
1 工具→自定义:2 点击 命令 标签:3 在上方单选区选中 菜单栏,下拉列表选 文件:4 点击 添加命令5 在类别中,找到文件,在右侧找到高级保存选项,确定6 然后可以通过下移调整该选项在文件菜单中 ...
- 原生js数值开根算法
不借助Math函数求开根值 1.二分迭代法求n开根后的值 思路: left=0 right=n mid=(left+right)/2 比较mid^2与n大小 =输出: >改变范围,right=m ...
- .NET / C# EF中的基础操作（CRUD）
查 public List<users> Querys() { datatestEntities db = new datatestEntities(); var a = db.users ...
- spark存储管理之磁盘存储--DiskStore
DiskStore 接着上一篇,本篇,我们分析一下实现磁盘存储的功能类DiskStore,这个类相对简单.在正式展开之前,我觉得有必要大概分析一下BlockManager的背景,或者说它的运行环境,运 ...
- （一）类型转换 is 和 as
c# 是强类型语言. CLR最重要的特性之一就是 类型安全,在运行时,CLR总是知道对象的类型是什么,C#所有的类的继承自system.Object ,所以都包含GetType方法,调用GetType ...
- 【转载】C#的DataTable使用NewRow方法创建新表格行
在C#的DataTable数据表格操作过程中,DataRow类表示DataTable中的数据行信息,但DataRow没有可以直接实例化的构造方法,在创建DataTable的新行的时候,不可直接使用Da ...
- Python 常用语句
条件语句 a=input("请输入数字a的值:\n") a=int(a) #从控制台接收到的都是字符串类型,需要转换 if a==0: #也可以写成if(a==0): print( ...