<!DOCTYPE html>

<html>

    <head>

        <meta charset="UTF-8">

        <title>运动框架-匀速运动</title>

        <style type="text/css">

            .div {

                width: 100px;

                height: 100px;

                background-color: chartreuse;

                margin-top: 20px;

                position: relative;

                left: 0;

                top: 0;

            }

        </style>

        <script type="text/javascript">

            var timer = null;

            function start() {

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

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

                //1

                clearInterval(timer);

                timer = setInterval(function() {

                    var speed = 1;

                    //2

                    if(oDiv.offsetLeft >= 1100) {

                        clearInterval(timer);

                    }

                    else{

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

                    }

                }, 30)

            }

        </script>

    </head>

    <body>

        <input type="button" id="btn" value="运动" onclick="start()" />

        <div class="div" id="div"></div>

        <p>关键点:1:清除定时器，2：if/else判断</p>

    </body>

</html>

学习路径：智能社的开发教程：https://ke.qq.com/webcourse/index.html#course_id=152997&term_id=100174752&taid=766913655494053&vid=v14127nxshc

JS-简单地匀速运动框架的更多相关文章

  1. [js高手之路]打造通用的匀速运动框架

    本文,是接着上文[js高手之路]匀速运动与实例实战(侧边栏,淡入淡出)继续的,在这篇文章的最后,我们做了2个小实例:侧边栏与改变透明度的淡入淡出效果,本文我们把上文的animate函数,继续改造,让变 ...

  2. Node.js简单介绍并实现一个简单的Web MVC框架

    编号:1018时间:2016年6月13日16:06:41功能:Node.js简单介绍并实现一个简单的Web MVC框架URL :https://cnodejs.org/topic/4f16442cca ...

  3. [js高手之路]面向对象版本匀速运动框架

    这篇文章的效果,需要看过以下3篇文章: [js插件开发教程]一步步开发一个可以定制配置的隔行变色小插件 [js高手之路]匀速运动与实例实战(侧边栏,淡入淡出) [js高手之路]打造通用的匀速运动框架 ...

  4. Atitit.js javascript的rpc框架选型

    Atitit.js javascript的rpc框架选型 1. Dwr1 2. 使用AJAXRPC1 2.2. 数据类型映射表1 3. json-rpc轻量级远程调用协议介绍及使用2 3.1. 2.3 ...

  5. node.js 在 Express4.0 框架使用 Connect-Busboy 实现文件上传

    node.js下四种post提交数据的方式 今天说分享的是其中一种,就是上传文件. Express 4.0 以后,将功能原子化,高内聚,低耦合,独立出了很多中间件 今天主要分享文件上传 对于conne ...

  6. Maven+Spring+Hibernate+Shiro+Mysql简单的demo框架(二)

    然后是项目下的文件:完整的项目请看  上一篇 Maven+Spring+Hibernate+Shiro+Mysql简单的demo框架(一) 项目下的springmvc-servlet.xml配置文件: ...

  7. [angularjs] MVC + Web API + AngularJs 搭建简单的 CURD 框架

    MVC + Web API + AngularJs 搭建简单的 CURD 框架 GitHub 地址:https://github.com/liqingwen2015/Wen.MvcSinglePage ...

  8. 使用Node.js实现简易MVC框架

    在使用Node.js搭建静态资源服务器一文中我们完成了服务器对静态资源请求的处理,但并未涉及动态请求,目前还无法根据客户端发出的不同请求而返回个性化的内容.单靠静态资源岂能撑得起这些复杂的网站应用,本 ...

  9. [转] 使用Node.js实现简易MVC框架

    在使用Node.js搭建静态资源服务器一文中我们完成了服务器对静态资源请求的处理,但并未涉及动态请求,目前还无法根据客户端发出的不同请求而返回个性化的内容.单靠静态资源岂能撑得起这些复杂的网站应用,本 ...

  10. koa2源码解读及实现一个简单的koa2框架

    阅读目录 一:封装node http server. 创建koa类构造函数. 二:构造request.response.及 context 对象. 三:中间件机制的实现. 四:错误捕获和错误处理. k ...

随机推荐

  1. Java获取web项目路径

    File f = new File(WebPath.class.getResource("/").getPath()); String path = f.getParentFile ...

  2. Android 自定义Adapter实现多视图Item的ListView

    自定义Adapter实现多视图Item的ListView http://www.devdiv.com/adapter_item_listview-blog-20-7539.html 1.原理分析 Ad ...

  3. Aria2 懒人安装教程

    https://aria2.github.io/ uI版:https://github.com/ziahamza/webui-aria2 web的 可以在线使用的 https://ziahamza.g ...

  4. 基于Java的四大开源测试工具

    摘要:成功的应用程序离不开测试人员和QA团队反复地测试,应用程序在进行最后的部署之前,需要通过测试来确保它的负载管理能力以及在特殊情况下的工作条件和工作加载情况. %R[)vA t]N0 测试是应用程 ...

  5. 《FPGA全程进阶---实战演练》第三章之PCB设计之电感、磁珠和零欧姆电阻

    2.电感.磁珠和零欧姆电阻的区别 电感:电感是储能元件,多用于电源滤波回路.LC振荡电路.中低频滤波电路等,其应用频率很少超过50MHz.对电感而言,其感抗值和频率成正比.XL = 2πfL来说明,其 ...

  6. 关于Unity中物理引擎的使用

    物理引擎控制刚体,刚体上面贴上图片,所以看起来就是游戏运行起来的状态 物理世界计算刚体的运行状态,通过贴图显现出运算结果. 一.物理引擎 1:Unity 2D物理引擎基于Box2D封装而成;2: 物理 ...

  7. PHP 正则表达式 及常用汇总

    Δ  定界符 Δ  字符域 Δ  修饰符 Δ  限定符 Δ  脱字符 Δ  通配符(正向预查,反向预查) Δ  反向引用 Δ  惰性匹配 Δ  注释 Δ  零字符宽     1.    平时做网站经常 ...

  8. Java中的内存处理机制和final、static、final static总结

    Java中的内存处理机制和final.static.final static总结   装载自:http://blog.csdn.net/wqthaha/article/details/20923579 ...

  9. apache -- xampp配置虚拟主机

    <VirtualHost *:80> ServerName www.myblog.com DocumentRoot "F:/Code/myblog"<Direct ...

  10. Python如何输出包含在对象中的中文字符？

    >>> bb = {'classes': ['\xe5\xb0\x96\xe6\xa4\x92\xe5\x9c\x9f\xe8\xb1\x86\xe4\xb8\x9d', '\xe5 ...