<!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. HTML——动画效果：左侧固定悬浮栏（图标控制）

    效果: 默认时: 点击按钮时 html: <!DOCTYPE html> <html> <head> <title>智能家居</title> ...

  2. 简单又好用的聊天室技术——WebSocket

    现在,很多网站为了实现推送技术,所用的技术都是轮询.轮询是在特定的的时间间隔(如每1秒),由浏览器对服务器发出HTTP request,然后由服务器返回最新的数据给客户端的浏览器.这种传统的模式带来很 ...

  3. 空间管理 您的位置: 51Testing软件测试网 » lilisx2006的个人空间 » 日志 在一个没有测试经理的小公司如何做好测试

    如何在一个没有测试经理的小公司做好测试? 首先,没有测试经理意味着测试人员没有最直接的管理者,往往这种时候的管理者是开发经理或技术总监,但他们何其忙耶?同时,在无人监管的情况下,测试是一个很容易偷懒的 ...

  4. UML总结--总体架构

    架构图(一): 架构图(二): 转自:http://blog.csdn.net/lsh6688/article/details/5931706

  5. 关于Struts2的界面的摆放

    控件有的时候怎么放都感觉放不到自己想要的位置,这时候可以有这几个做法 1.用一个table标签来创建一个表格,再在表格里面一行一列地放,比较整齐 2.用表格,结果却发现有的控件位置莫名其妙,这时候就要 ...

  6. HttpComponents 基础接口/类与HTTP message的对应关系

    前提一: 什么是HTTP Message -- 遵循HTTP协议发送的消息!其格式是固定的:HTTP Message = Message Line + Message Header + Message ...

  7. Runtime是什么？

    在看 RPC 的概念模型与实现解析 的时候,看到图片上有Runtime,又想到见过很多Runtime之类的东西,所以就想弄明白这到底是个什么东西. (因为是程序名,所以根本没想到代码的“编译-运行”~ ...

  8. 64位程序，long*转long 出错

    原因: long*在64位程序中占8个字节,long占4个字节.强转会出错. 解决方法: 把long用long long替换,long long 占8个字节

  9. （转）YV12 and NV12

    用videoCapture和IAMStreamConfig拿到的支持的格式列表.发现支持2中图像格式,YV12和NV12.具体是怎么样的内存分布不知道.查了些文档.自己修改了几个图.看出了点端倪 YV ...

  10. Unity3D-光照贴图技术

    概念 Lightmapping光照贴图技术是一种增强静态场景光照效果的技术,其优点是可以通过较少的性能消耗使静态场景看上去更加真实,丰富,更加具有立体感:缺点是不能用来实时地处理动态光照.当游戏场景包 ...