<!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. MATLAB时间序列预测Prediction of time series with NAR neural network

    具体请参考:http://lab.fs.uni-lj.si/lasin/wp/IMIT_files/neural/nn05_narnet/ 神经网络预测时间序列数据,有三种模型, 这里是给出的是第二种 ...

  2. uva 1639--精度处理方法之取对数（uva 1639）

    1639 - Candy Time limit: 3.000 seconds 1639 CandyLazyChild is a lazy child who likes candy very much ...

  3. BZOJ4003 [JLOI2015]城池攻占

    这题有两种做法来着... 第一种就是一开始想到的比较不靠谱,不过貌似可以过掉: 看从$1$号节点开始到$p$号节点最大需要的体力,记录单调上升的体力,询问的时候二分跳着走就可以了 不过精度问题还有可能 ...

  4. 如何解决linQ“序列不包含任何元素”的问题?

    描述:该问题出现在校对BT种子数据的时候遇到的bug,原因是使用linq查找元素的时候 B是A的一个子集, B在A中一定存在,这种情况下就不会抛出异常情况,反之B的一部分不属于A就会异常应为B中的一个 ...

  5. c#网络通信框架networkcomms内核解析之八 数据包的核心处理器

    NetworkComms网络通信框架序言 本文基于networkcomms2.3.1开源版本  gplv3协议 我们先回顾一个 c#网络通信框架networkcomms内核解析之六 处理接收到的二进制 ...

  6. java 面向对象编程-- 第十三章 反射、类加载与垃圾回收

    1.狭义JavaBean规范 Javabean必须包含一个无参数的public构造方法,方便通过反射的方式产生对象. 属性必须都是私有的. Javabean必须包含符合命名规范的get和set方法,以 ...

  7. 为什么你总是学不好Linux技术？这是我的答案。

    摘要: 我们为什么要学习Linux,最近几年Linux发展迅速,特别服务器领域,带来了很多新技术,云计算,虚拟化,大数据等技术,还有安全方面都有了很大的发展同时也给了Linux运维工作带来了,更多的要 ...

  8. Junit4的简单使用

    junit4的简单使用 测试套件的使用 测试类1 package com.westward; import static org.junit.Assert.*; import org.junit.Te ...

  9. HDU 4906 Our happy ending（2014 Multi-University Training Contest 4）

    题意:构造出n个数 这n个数取值范围0-L,这n个数中存在取一些数之和等于k,则这样称为一种方法.给定n,k,L,求方案数. 思路:装压 每位 第1为表示这种方案能不能构成1(1表示能0表示不能)   ...

  10. windows-docker开发我常用命令 docker-machine ssh default

    docker-machine ssh default  docker logs test sudo systemctl start docker       docker tag IMAGEID ne ...