一、js的运动

　　匀速运动

  1. 清除定时器
  2. 开启定时器
  3. 运动是否完成：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每日一练（九）——运动一：匀速运动的更多相关文章

  1. javascript每日一练—运动

    1.弹性运动 运动原理:加速运动+减速运动+摩擦运动: <!doctype html> <html> <head> <meta charset="u ...

  2. javascript每日一练（十四）——弹性运动

    一.弹性运动 运动原理:加速运动+减速运动+摩擦运动: <!doctype html> <html> <head> <meta charset="u ...

  3. javascript每日一练（十二）——运动框架

    运动框架 可以实现多物体任意值运动 例子: <!doctype html> <html> <head> <meta charset="utf-8&q ...

  4. javascript每日一练（十一）——多物体运动

    一.多物体运动 需要注意:每个运动物体的定时器作为物体的属性独立出来互不影响,属性与运动对象绑定,不能公用: 例子1: <!doctype html> <html> <h ...

  5. javascript每日一练（十）——运动二：缓冲运动

    一.缓冲运动 实现原理:(目标距离-当前距离) / 基数 = 速度(运动距离越大速度越小,运动距离和速度成反比) (500 - oDiv.offsetLeft) / 7 = iSpeed; 需要注意: ...

  6. javascript每日一练（十三）——运动实例

    一.图片放大缩小 <!doctype html> <html> <head> <meta charset="utf-8"> < ...

  7. javascript每日一练（一）——javascript基础

    一.javascript的组成 ECMAScript DOM BOM 二.变量类型 常见类型有:number, string, boolean, undefined, object, function ...

  8. javascript每日一练（八）——事件三：默认行为

    一.阻止默认行为 return false; 自定义右键菜单 <!doctype html> <html> <head> <meta charset=&quo ...

  9. javascript每日一练（七）——事件二：键盘事件

    一.键盘事件 onkeydown触发, keyCode键盘编码 ctrlKey altKey shiftKey 键盘控制div移动 <!doctype html> <html> ...

随机推荐

  1. 在SQL 中生成JSON数据

    这段时间接手一个数据操作记录的功能,刚拿到手上的时候打算用EF做,后来经过仔细考虑最后还是觉定放弃,最后思考再三决定: 1.以模块为单位分表.列固定(其实可以所有的操作记录都放到同一个表,但是考虑到数 ...

  2. python字符串格式化符号含义及转义字符含义

    字符串格式化符号含义    符   号    说     明      %c    格式化字符及其ASCII码      %s    格式化字符串      %d    格式化整数      %o   ...

  3. 在Windows Server 2008 R2 中架设 SMTP 服务器

    安装SMTP服务器 Step 1 在功能里面勾选SMTP 服务器,一路下一步完成安装 Step 2 在IIS6的SMTP属性里面的访问标签点击连接,然后设置本机可访问. (其实可以不用设置) Step ...

  4. BZOJ 1202: [HNOI2005]狡猾的商人( 差分约束 )

    好像很多人用并查集写的... 前缀和, 则 sumt - sums-1 = v, 拆成2条 : sumt ≤ sums-1 + v, sums-1 ≤ sumt - v 就是一个差分约束, 建图跑SP ...

  5. codeforces 463E . Caisa and Tree

    题目链接 给一棵树, 两种操作, 一种是将点u的权值改为y, 另一种是查询根节点到点u的路径上, gcd(v, u)>1的深度最深的点v. 修改操作不超过50次. 这个题, 暴力可以过, 但是在 ...

  6. Introduction to Json

    什么是Json 是Javascript·对象的一种表示,属于轻量级数据,它比XMl小,快,易解析 作用: 用于存储和交换(转换)信息的语言,还可以将各种数据类型放在json中并进行数据传输 整理的章节 ...

  7. 【xcode】错误之Could not launch "" failed to get the task for process

    http://blog.csdn.net/teng_ontheway/article/details/8467932 在Xcode下编译工程正常,在模拟器下运行正常,最后在真机上运行的时候出现了如下错 ...

  8. C语言之自守数

    自守数 自守数是指一个数的平方的尾数等于该数自身的自然数,如25*25=625,76*76=5776.要求求出一定范围内的所有自守数. 题目分析: 刚拿到这个题目的时候认为解题关键在于,测试该数平方数 ...

  9. 1 初级.net web工程师，在工作中都做些什么

    初级.Net Web工程师,在工作中都做些神马?   职责 初级.Net Web工程师的主要职责,就是按比较详细的要求去完成代码. 比较详细的要求是指:一般会把页面式样.功能的描述.数据库结构.性能要 ...

  10. 循环之while