<!DOCTYPE HTML>

 <html>

 <head>

 <meta http-equiv="Content-Type" content="text/html; charset=utf-8">

 <title>无标题文档</title>

 <style>

 #div1 {width:100px; height: 100px; background: red; position: absolute; left: 0px; top: 30px;}

 </style>

 <script>

 /*

 在js中，如果让一个页面元素动起来

 */

 window.onload = function() {

     var oBtn = document.getElementById('btn');

     var oDiv = document.getElementById('div1');

     var iTimer = null;

     //点击按钮，让div1横向向右移动

     //定时器

     /*

     1.清除定时器，保证运动过程中只有一个定时器在执行

     2.开始定时器

     3.开始运动（同时在运动加入判断，以便在需要的时候或者是满足某个要求停止运动）

     */

     oBtn.onclick = function() {

         clearInterval(iTimer);

         iTimer = setInterval(function() {

             //oDiv.style.left = oDiv.offsetLeft + 10 + 'px';

             if (oDiv.offsetLeft == 500) {

                 clearInterval(iTimer);

             } else {

                 oDiv.style.left = oDiv.offsetLeft + 10 + 'px';

             }

         }, 30);

     }

 }

 </script>

 </head>

 <body>

     <input type="button" value="动起来" id="btn" />

     <div id="div1"></div>

 </body>

 </html>

JS运动基础(一)的更多相关文章

  1. 第八节 JS运动基础

    运动基础 让Div运动起来 速度——物体运动的快慢 运动中的Bug 不会停止 速度取某些值会无法停止 到达位置后再点击还会运动 重复点击速度加快 匀速运动(速度不变) 运动框架及应用: 运动框架: 在 ...

  2. 学习blus老师js(6)--js运动基础

    运动基础 一.匀速运动 运动框架 在开始运动时,关闭已有定时器 把运动和停止隔开(if/else) <!DOCTYPE HTML> <html> <head> &l ...

  3. js运动基础2（运动的封装）

    简单运动的封装 先从最简单的封装开始,慢慢的使其更丰富,更实用. 还是上一篇博文的代码,在此不作细说. 需求:点击按钮,让元素匀速运动. <!DOCTYPE html> <html ...

  4. JS运动基础(四) 碰撞运动

    碰撞运动撞到目标点,速度反转无重力的漂浮Div速度反转滚动条闪烁的问题过界后直接拉回来 加入重力反转速度的同时,减小速度纵向碰撞,横向速度也减小横向速度小数问题(负数) <!DOCTYPE HT ...

  5. JS运动基础(三) 弹性运动

    加减速运动速度不断增加或减少速度减小到负值,会向反方向运动 弹性运动在目标点左边,加速:在目标点右边,减速根据距离,计算加速度 带摩擦力的弹性运动弹性运动+摩擦力 弹性:速度 += (目标点 - 当前 ...

  6. JS运动基础(二) 摩擦运动、缓冲运动

    摩擦运动: 逐渐变慢,最后停止 缓冲运动: 与摩擦力的区别:可以精确的停到指定目标点距离越远速度越大速度由距离决定速度=(目标值-当前值)/缩放系数Bug:速度取整值取整: iSpeed = iSpe ...

  7. JS运动基础

    <!DOCTYPE html> <html> <head lang="en"> <meta charset="UTF-8&quo ...

  8. Javascript 运动基础 01

    JS运动基础  运动基础   让Div运动起来 速度——物体运动的快慢 运动中的Bug 不会停止 速度取某些值会无法停止 到达位置后再点击还会运动 重复点击速度加快   匀速运动 速度不变 <s ...

  9. JS学习-基础运动

    多物体运动 多个物体用同一个函数时,函数里定义的定时器应该要每个物体对应一个定时器名称,不然会导致未完成运动就被关闭了,因为定时器名称一样,而开启定时器前会清除一下. obj.timer 多值同时运动 ...

随机推荐

  1. uva 1220

    1220 - Party at Hali-Bula Time limit: 3.000 seconds Dear Contestant, I'm going to have a party at my ...

  2. php solr 扩展

    安装php的solr扩展 下载地址: http://pecl.php.net/get/solr windows下载地址: http://downloads.php.net/pierre/php_sol ...

  3. PMP 项目管理

    1.什么是项目管理   项目管理就是把各种知识,技能,工具,技术应用于项目活动,来满足项目的需求.这个是从技术方面来说的.其实在项目管理的技术 层面背后,还有理念层面的内容.学习项目管理,除了学习技术 ...

  4. ant非法字符：\65279 错误

    ant非法字符:\65279 错误前段时间用ant把项目打包,遇到一个问题:编译java文件的时候,有些java文件报非法字符 \65279错误,在网上找和很多方法,也试了很多方法,换JDK,网上说的 ...

  5. Unity中的Path对应各平台中的Path

    OS: Application.dataPath :                    Application/xxxxxxxx-xxxx-xxxx-xxxx-xxxxxxxxxxxx/xxx.a ...

  6. Linux-如何查看登陆shell的类型

    输入一个系统不认识的命令(如#ig)获得系统提示 aix/#ig ksh ig not found #echo $ (适用sh/ksh) aix/#echo $ ksh #echo $SHELL(用户 ...

  7. HDU 5353

    题目大意: 相邻的朋友可以给出自己手上最多一颗糖,n个朋友形成一个环,问给的方式能否最后使所有朋友都糖的数量相同 这里我用的是网络流来做的,这里n=100000,用sap的模板可以跑过 #includ ...

  8. UITableViewCell Property “icon” cannot be found in forward class object “DJWeiBo”

    UITableViewCell 自定义表格 实体属性不显示错误 Property “icon” cannot be found in forward class object “DJWeiBo”引入实 ...

  9. 读者写者问题（有bug 后续更改）

    与上一篇<秒杀多线程第十篇 生产者消费者问题>的生产者消费者问题一样,读者写者也是一个非常著名的同步问题.读者写者问题描述非常简单,有一个写者很多读者,多个读者可以同时读文件,但写者在写文 ...

  10. 经典线程同步 互斥量Mutex

    阅读本篇之前推荐阅读以下姊妹篇: <秒杀多线程第四篇一个经典的多线程同步问题> <秒杀多线程第五篇经典线程同步关键段CS> <秒杀多线程第六篇经典线程同步事件Event& ...