<!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. kubernetes 数据持久化

    pod本身是无状态,所以很多有状态的应用,就需要将数据进行持久化. 1:将数据挂在到宿主机.但是pod重启之后有可能到另外一个节点,这样数据虽然不会丢但是还是有可能会找不到 apiVersion: v ...

  2. CAS (4) —— CAS浏览器SSO访问顺序图详解（CAS Web Flow Diagram by Example）

    CAS (4) -- CAS浏览器SSO访问顺序图详解(CAS Web Flow Diagram by Example) tomcat版本: tomcat-8.0.29 jdk版本: jdk1.8.0 ...

  3. 一站式学习Wireshark（四）：网络性能排查之TCP重传与重复ACK

    作为网络管理员,很多时间必然会耗费在修复慢速服务器和其他终端.但用户感到网络运行缓慢并不意味着就是网络问题. 解决网络性能问题,首先从TCP错误恢复功能(TCP重传与重复ACK)和流控功能说起.之后阐 ...

  4. [转]Python Web部署方式总结

    学过PHP的都了解,php的正式环境部署非常简单,改几个文件就OK,用FastCgi方式也是分分钟的事情.相比起来,Python在web应用上的部署就繁杂的多,主要是工具繁多,主流服务器支持不足,在了 ...

  5. FTP内容

    1.1.1 作业FTP部署. FTP工具或者浏览器默认使用的都是PASV模式连接FTP服务器 1.先检查有没有安装   rpm -q vsftpd 如果没有安装   yum install vsftp ...

  6. form_tag

    class SwitchesController < ApplicationController #before_filter :authenticate_user!, :except => ...

  7. QT 交叉编译工具选择

    使用QT交叉编译,生成的都是x86的可执行文件.Zoro告诉我交叉工具配置错了. 参考链接: http://www.cnblogs.com/zengjfgit/p/4744507.html linux ...

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

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

  9. 【转】C# URL短地址压缩算法及短网址原理解析

    这篇文章主要介绍了C# URL短地址压缩算法及短网址原理解析,本文重点给出了算法代码,需要的朋友可以参考下 短网址应用已经在全国各大微博上开始流行了起来.例如QQ微博的url.cn,新郎的sinaur ...

  10. erlang 自定义函数的初步应用

    一.模块内调用 1> AA=fun(BB)-> io:format("this is test args ~s~n",[BB]) end.#Fun<erl_eva ...