<!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. kernel printk信息显示级别

    涉及文件:kernel/printk.c include/linux/kernel.h用printk内核会根据日志级别把消息打印到当前控制台上.信息正常输出前提是--日志输出级别(msg_log_le ...

  2. 常用shell命令实战

    #!/bin/sh ################### #### 环境变量 ### ################### #主程序目录 #APP_HOME=/apps/svr/apache-to ...

  3. 【C】——回调函数实现泛型算法

    回调函数的一个典型应用就是实现类似C++的泛型算法(Generics Algorithm).下面实现的max函数可以在任意一组对象中找出最大值,可以是一组int.一组char或者一组结构体,但是实现者 ...

  4. mongodb如何查询某个字段多个值的数据

    数据库  python  mongodb 4.9k 次浏览 问题对人有帮助,内容完整,我也想知道答案0问题没有实际价值,缺少关键内容,没有改进余地 如何查询mongodb某个集合里面某一个字段为多个情 ...

  5. rails中path、url路径解析，routes信息，form_for剖析,link_to示例，路由实例说明

    原创,转载请注明http://www.cnblogs.com/juandx/p/3963023.html  rails中path.url路径解析,routes信息,form_for剖析,link_to ...

  6. 纯CSS实现圆角、可拖动的一个DIV模块层

    <style>body{ margin:0px; padding:0px; font-size:14px;}#t { position:absolute; float:left; left ...

  7. easyUI datagrid 排序

    easyUI datagrid 排序 1.首先设置datagrid属性sortName 2.设置sortOrder 3.设置remoteSort(注:此属性默认为true,如果如果是对本地数据排序必须 ...

  8. R笔记4：ggplot绘制商务图表--玫瑰图

    我们说Excel有难度的图表,可以考虑ggplot2是否更方便,本帖的例子就是用ggplot做玫瑰图. Excel做玫瑰图有一定难度,可以使用雷达图或圆环图来构建,我的博客上曾有多个帖子讨论这个,见 ...

  9. 《FPGA全程进阶---实战演练》第二章之PCB layout注意事项以及投板几点说明

           上一篇博客讲述了各个部分的原理图,那么根据原理图画出PCB,其实PCB是一门很大的学问,想要掌握谈何容易.就笔者在画PCB时的一些注意事项做一些说明.        1.电源部分的电源线 ...

  10. 一个小bug

    如果提交表单给按钮一个名字,就会报错... <html> <body> <form action="{:U('Index/login')}" meth ...