<!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. VMWare虚拟机安装创建虚拟机的使用教程

    VMWare虚拟机安装创建虚拟机的使用教程   在配置虚拟机之前需要安装它,VMWare软件的安装过程比较简单,在安装在之前应该先看下说明文档.下面以VMWare Workstation6.5虚拟机 ...

  2. [LintCode]各位相加

    描述: 给出一个非负整数 num,反复的将所有位上的数字相加,直到得到一个一位的整数. 给出 num = 38. 相加的过程如下:3 + 8 = 11,1 + 1 = 2.因为 2 只剩下一个数字,所 ...

  3. 部署zookeeper集群

    1.把zookeeper.tar.gz解压之后,移动到/usr目录下 2.首先要给zookeeper之间的每个节点的ssh设置无密码登陆 3.在zookeeper目录下编辑zoo.cfg,复制zoo_ ...

  4. iOS彩票项目--第三天，搭建竞技场和发现，搭建幸运选号和我的彩票界面

    一.竞技场搭建--UISegmentedControl的使用 // 重写 自定义控制器的view - (void)loadView { UIImageView *imgView = [[UIImage ...

  5. mac配置完ssh依然提示"Enter passphrase for key"解决方法

    使用Git,每次都提示输入命令. 这个问题折磨很久,明明已经配置过ssh了,可是每次还要提示输入密码,从网上查查,最后一条命令解决问题: 问题提示: Enter passphrase for key ...

  6. Cygwin镜像使用帮助

    Cygwin镜像使用帮助 收录架构 x86 x86_64 收录版本 所有版本 更新时间 每12小时更新一次   使用说明 选择从互联网安装, 在"User URL"处输入以下地址 ...

  7. 用route命令解决多出口的问题

    网络已经走进了我们的生活.工作.学习之中,大多数单位.公司都已经连接到了Internet.但是,因为各种原因,有这样一个问题存在.就是:这些单位即有到公网(Internet)的出口连接,也有到专网(单 ...

  8. Hive SQL执行流程分析

    转自 http://www.tuicool.com/articles/qyUzQj 最近在研究Impala,还是先回顾下Hive的SQL执行流程吧. Hive有三种用户接口: cli (Command ...

  9. windows下安装TA-Lib库

    步骤一: https://sourceforge.net/projects/ta-lib/files/ta-lib/0.4.0/ta-lib-0.4.0-msvc.zip/download?use_m ...

  10. struts2将数据通过Json格式显示于EasyUI-datagrid数据表格

    1.搭建ssh开发环境 2.写好Dao.service等方法 3.建立DTO数据传输对象: package com.beichende.sshwork.user.web.dto; import jav ...