javascript每日一练(九)——运动一:匀速运动
一、js的运动
匀速运动
- 清除定时器
- 开启定时器
- 运动是否完成:a、运动完成,清除定时器;b、运动未完成继续
匀速运动停止条件:距离足够近 Math.abs(当然距离-目标距离) < 最小运动距离
div的匀速运动(简单运动)
<!doctype html> <html> <head> <meta charset="utf-8"> <title>无标题文档</title> <style> #div1{ width:100px; height:100px; background:red; position:absolute; top:50px; left:500px;} span{ width:1px; height:300px; background:black; position:absolute; left:300px; top:0; display:block;} </style> <script> window.onload = function() { var oBtn = document.getElementById('btn1'); var oDiv = document.getElementById('div1'); oBtn.onclick = function() { startMove(oDiv, 300); }; }; var timer = null; function startMove(obj, iTarget) { clearInterval(timer); timer = setInterval(function(){ var iSpeed = 0; if(obj.offsetLeft < iTarget) { iSpeed = 7; } else { iSpeed = -7; } if( Math.abs( obj.offsetLeft - iTarget ) < 7 ) { clearInterval(timer); obj.style.left = iTarget + 'px'; } else { obj.style.left = obj.offsetLeft + iSpeed + 'px'; } }, 30); } </script> </head> <body> <button id="btn1">移动</button> <div id="div1"></div> <span></span> </body> </html>
javascript每日一练(九)——运动一:匀速运动的更多相关文章
- javascript每日一练—运动
1.弹性运动 运动原理:加速运动+减速运动+摩擦运动: <!doctype html> <html> <head> <meta charset="u ...
- javascript每日一练(十四)——弹性运动
一.弹性运动 运动原理:加速运动+减速运动+摩擦运动: <!doctype html> <html> <head> <meta charset="u ...
- javascript每日一练(十二)——运动框架
运动框架 可以实现多物体任意值运动 例子: <!doctype html> <html> <head> <meta charset="utf-8&q ...
- javascript每日一练(十一)——多物体运动
一.多物体运动 需要注意:每个运动物体的定时器作为物体的属性独立出来互不影响,属性与运动对象绑定,不能公用: 例子1: <!doctype html> <html> <h ...
- javascript每日一练(十)——运动二:缓冲运动
一.缓冲运动 实现原理:(目标距离-当前距离) / 基数 = 速度(运动距离越大速度越小,运动距离和速度成反比) (500 - oDiv.offsetLeft) / 7 = iSpeed; 需要注意: ...
- javascript每日一练(十三)——运动实例
一.图片放大缩小 <!doctype html> <html> <head> <meta charset="utf-8"> < ...
- javascript每日一练(一)——javascript基础
一.javascript的组成 ECMAScript DOM BOM 二.变量类型 常见类型有:number, string, boolean, undefined, object, function ...
- javascript每日一练(八)——事件三:默认行为
一.阻止默认行为 return false; 自定义右键菜单 <!doctype html> <html> <head> <meta charset=&quo ...
- javascript每日一练(七)——事件二:键盘事件
一.键盘事件 onkeydown触发, keyCode键盘编码 ctrlKey altKey shiftKey 键盘控制div移动 <!doctype html> <html> ...
随机推荐
- IT忍者神龟之Struts2.xml配置全然正确流程能走通可是有红叉解决
一:Multiple annotations found at this line:Undefined actionName parameter Undefined actionnamespace ...
- C++ 函数映射使用讲解
想想我们在遇到多语句分支时是不是首先想到的是 switc case 和 if else if ... 这2种方式在编码方面确实简单少,但是当分支达到一定数量后,特别是分支内部有嵌套大段代码或者再嵌套分 ...
- sql日期转换格式
Select CONVERT(varchar(100), GETDATE(), 0): 05 16 2006 10:57AM Select CONVERT(varchar(100), GETDATE( ...
- js得到分页栏
自己写的,感觉返回html代码蠢蠢的,但是新手并不知道怎么写更好的,感觉这样子也蛮简单.记录下来,以后来越改越好. //获得分页栏.注意indexSize为奇数,这样也比较好看 //totalNum: ...
- html 5 废弃的标签和属性
第一类:表现性元素 basefont big center font s strike tt u 建议用语义正确的元素代替他们,并使用CSS来确保渲染后的效果 第二类:框架类元素 因框架有很多可用性及 ...
- Linux输入子系统(Input Subsystem)
Linux输入子系统(Input Subsystem) http://blog.csdn.net/lbmygf/article/details/7360084 input子系统分析 http://b ...
- JavaSE学习总结第09天_面向对象4
09.01 final关键字引入 例: class Fu { public final void show() { System.out.println("访问底层资源"); ...
- 关于Ubuntu远程ssh连接失败的问题
在做机器人项目的时候,用的是Ubuntu的linux,跟之前的CentOS的操作命令有一点差别,就比如防火墙的名字,在Ubuntu系统中叫什么ufw,真是有点不好接受. 为了能模拟环境,我又弄了一台电 ...
- Nginx简单操作
Nginx简单操作 平滑重启:读取配置文件,正确后启动新nginx,关闭旧服务进程 # kill HUP nginx.pid # /usr/sbin/nginx -c /etc/nginx/nginx ...
- 推荐font-size的单位 % em单位
在如今这个提倡可用性设计以及用户体验设计的网络时代,CSS也是要一同参与其中的.大部分人在CSS代码编写中总是先对整体定义字体尺寸,中文情况下一般为12px,而其实这样以来在通过IE顶部菜单中的“察看 ...