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> ...
随机推荐
- Microsoft Deployment Toolkit 2013 Preview Release Now Available
MDT 2013 provides a common console with comprehensive tools and guidance for every organizational ro ...
- android程序报错“error launching activity com.android.ddmlib.shellcommandunresponsiveexception”的解决方式
今天在调试android程序的时候,因为是NDK开发,要先编译.so库再打包下载到android模拟器,所以花费的时间比較长.控制台就会报例如以下错误: error launching activit ...
- Android学习笔记(十四)——在执行时加入碎片(附源代码)
在执行时加入碎片 点击获取源代码 将UI切割为多个可配置的部分是碎片的优势之中的一个,但其真正强大之处在于可在执行时动态地把它们加入到活动中. 1.使用上一篇创建的Fragments项目,在main. ...
- iOS开发 点击跳转到App Store 或者 点击按钮去评价
//跳转到应用页面 NSString *str = [NSString stringWithFormat:@"http://itunes.apple.com/us/app/id%d" ...
- 一些指令 & 一些知识 (Linux Spring log4j...)
#!/bin/sh myPath="/var/log/httpd/" myFile="/var /log/httpd/access.log" #这里的-x 参数 ...
- 补全aaz288 可能有问题的过程 P_COMPL_AAZ288
补全aaz288 可能有问题的过程: /* add by weiyongle 20160623 失地农民补足aaz288,针对早期导出的数据(只适用于江安县) 经测试:江安县 江安县个体劳动者 这个单 ...
- PHP 导入excel
db.php为数据库操作类, $config为数据库配置,PHPExcel版本为PHPExcel_1.8.0, PHP代码: header("Content-type:text/html; ...
- 再次复习数据结构:c语言链表的简单操作
最近呢,又要面临多次的数据结构与算法方面的试题了,而我呢,大概也重新温习c语言的基本要点快一个月了,主要是针对指针这货的角度在研究c语言,感觉又学到了不少. 现在c指针感觉知道点了,也就匆忙开展数据结 ...
- Robot Framework学习路线
0. 官方网站 http://robotframework.org/ 所有资料都来自这里,从这里找到必要的链接,从而深入其中的细节. 1. Quick Start Guide https://co ...
- Kruscal 、 Prime Template
Kruscal Template : 很裸的Kruscal Template(求最小生成树中最长路,即最短路中最长路) //#pragma comment(linker, "/STACK: ...