点击“开始运动”按钮，红色的#red区块开始向右匀速运动，抵达到黑色竖线位置自动停止，再次点击“开始运动”#red区块也不会再运动。同时为了便于后期维护，要求运动速度可在代码中灵活调整。

细节要求：

1、点击开始运动按钮后，在抵达终点线前，无论再次点击多少次按钮，#red区块均维持运动速率不变。

2、#red区块最后停滞位置不能超出黑色竖线。

<!DOCTYPE html>

<html lang="zh-CN">

<head>

  <meta charset="UTF-8">

  <title>JS小案例：匀速运动</title>

  <style>

    #red {

      width: 200px;

      height: 200px;

      background: red;

      position: absolute;

      top: 50px;

      left: 0;

    }

    .black {

      position: absolute;

      width: 1px;

      height: 200px;

      left: 900px;

      background: black;

    }

  </style>

  <script>

//补充代码

  </script>

</head>

<body>

  <input type='button' value='开始运动' id='btn' />

  <div id='red'></div>

  <div class='black'></div>

</body>

</html>

　　

参考代码：

<!DOCTYPE html>

<html lang="zh-CN">

<head>

  <meta charset="UTF-8">

  <title>JS小案例：匀速运动</title>

  <style>

    #red {

      width: 200px;

      height: 200px;

      background: red;

      position: absolute;

      top: 50px;

      left: 0;

    }

    .black {

      position: absolute;

      width: 1px;

      height: 200px;

      left: 900px;

      background: black;

    }

  </style>

  <script>

    window.onload = function () {

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

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

      var timer = null;

      function startMove() {

        var speed = 11;

        var iTarget = 700;

        /* 点击开始运动按钮后，在抵达终点线前，无论再次点击多少次按钮，#red区块均维持运动速率不变。

         *需要确保每次触发点击事件都只有开一个定时器，否则会出现点击越多，运动越快的情况。

         */

        if (timer) {

          clearInterval(timer);

        }

        timer = setInterval(function () {

          /*

           *通过if……else结构避免运动抵达目标后点击按钮，#red区块继续运动。

           *要确保运动不超出目标值，需要确保当#red与目标点的距离小于或等于speed值时，运动距离不能为speed，要单独进行设置。

           */

          if (iTarget - oDiv.offsetLeft < speed && 700 - oDiv.offsetLeft >= 0) {

            oDiv.style.left = iTarget + 'px';

            clearInterval(timer);

          } else {

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

          }

        }, 30);

      }

      oBtn.onclick = startMove;

    }

  </script>

</head>

<body>

  <input type='button' value='开始运动' id='btn' />

  <div id='red'></div>

  <div class='black'></div>

</body>

</html>

问题代码1：

 window.onload = function () {

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

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

      var timer = null;

      function startMove() {

        var speed = 11;

        var iTarget = 700;

        timer = setInterval(function () {

          if (iTarget - oDiv.offsetLeft < speed && 700 - oDiv.offsetLeft >= 0) {

            oDiv.style.left = iTarget + 'px';

            clearInterval(timer);

          } else {

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

          }

        }, 30);

      }

      oBtn.onclick = startMove;

    }

这个会出现什么问题？在抵达目标点前，点击按钮会发现#red约跑越快。

问题代码2：

  window.onload = function () {

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

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

      var timer = null;

      function startMove() {

        var speed = 11;

        var iTarget = 700;

        if (timer) {

          clearInterval(timer);

        }

        timer = setInterval(function () {

          if (iTarget - oDiv.offsetLeft < speed && 700 - oDiv.offsetLeft >= 0) {

            oDiv.style.left = iTarget + 'px';

            clearInterval(timer);

          }

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

        }, 30);

      }

      oBtn.onclick = startMove;

    }

这个会出现什么问题？在抵达目标点后，点击按钮，#red还会继续运动一下。　

问题代码3：

 window.onload = function () {

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

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

      var timer = null;

      function startMove() {

        var speed =9;

        var iTarget = 700;

        if (timer) {

          clearInterval(timer);

        }

        timer = setInterval(function () {

          if (oDiv.offsetLeft >= iTarget) {

            clearInterval(timer);

          } else {

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

          }

        }, 30);

      }

      oBtn.onclick = startMove;

    }

这个会出现什么问题？#red运动终止点有可能超出目标值一点，没有准确停止在目标值点。

js匀速运动框架案例的更多相关文章

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

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

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

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

  3. H5案例分享：JS手势框架 —— Hammer.js

    JS手势框架 -- Hammer.js 一.hammer.js简介 hammerJS是一个开源的,轻量级的触屏设备javascript手势库,它可以在不需要依赖其他东西的情况下识别触摸,鼠标事件.允许 ...

  4. Web前端-Vue.js必备框架（一）

    Web前端-Vue.js必备框架(一) <!DOCTYPE html> <html lang="en"> <head> <meta cha ...

  5. Node.js Express 框架

    Node.js Express 框架 Express 简介 Express 是一个简洁而灵活的 node.js Web应用框架, 提供了一系列强大特性帮助你创建各种 Web 应用,和丰富的 HTTP ...

  6. 全端开发必备！10个最好的 Node.js MVC 框架

      Node.js 是最流行的 JavaScript 服务端平台,它允许建立可扩展的 Web 应用程序.Node.js 包含不同类型的框架,如 MVC 框架.全栈框架.REST API  以及大量的服 ...

  7. 带无缝滚动的轮播图（含JS运动框架）

    今天学习了一下轮播图的写作,想到前一阵学过的无缝滚动得思想,所以就把轮播与滚动结合了一下.不过我的代码的神逻辑我自己都不敢恭维,在没网没参照的情况下,只能硬着头皮往下写,希望跟大家共勉吧. js运动框 ...

  8. js运动框架之一条乱跑的虫子

    克隆与运动框架的联合应用 效果:点击元素块后,元素块开始随机的向任何方向移动,并附带一堆颜色随机的"尾巴".每个方向运动3秒后改变方向,同时笑脸变哭脸. 如图所示: 朝某个方向运动 ...

  9. Mithril – 构建杰出 Web 应用的 JS MVC 框架

    Mithril 是一个客户端的 Javascript MVC 框架.它是一个工具,使应用程序代码分为数据层,UI 层和粘合层.提供了一个模板引擎与一个虚拟的 DOM diff 实现,用于高性能渲染,支 ...

随机推荐

  1. 网站搭建-云服务器ECS的使用

    1. 查看购买的云服务器实例,重置密码 2. 查找IP进行查看,此时网页时不存在的,开始配置: 3. 登录putty或其他终端,进行网页搭建,先按教程走一遍,然后再做个性化处理: #安装Apache ...

  2. mysql update 子查询作为条件

    UPDATE t_commission_template tctJOIN ( SELECT max(id) maxid FROM t_commission_template WHERE taken_m ...

  3. 使用Python对植物大战僵尸学习研究

    根据上一篇 使用Python读写游戏1 中,使用Python win32库,对一款游戏进行了读内存 操作. 今天来写一下对内存进行写的操作 正文 要进行32位的读写,首先了解一下要用到的几个函数,通过 ...

  4. 网络编程—【自己动手】用C语言写一个基于服务器和客户端（TCP）！

    如果想要自己写一个服务器和客户端,我们需要掌握一定的网络编程技术,个人认为,网络编程中最关键的就是这个东西--socket(套接字). socket(套接字):简单来讲,socket就是用于描述IP地 ...

  5. 什么是C和C++标准——小白必看

    本文简要介绍编写C/C ++应用程序的领域,标准库的作用以及它是如何在各种操作系统中实现的. 我已经接触C++一段时间了,一开始就让我感到疑惑的是其内部结构:我所使用的内核函数和类从何而来? 谁发明了 ...

  6. 无法访问GitHub

    我们开发者经常用的最大的同性交流平台--GitHub忽然访问不了了,很尴尬 可以打开控制台 ping一下 github.com 果不其然 不通 不过幸运的是里面有github的ip地址,好像是美国某个 ...

  7. docker设置http访问

    1 编辑配置文件    vim /etc/docker/daemon.json { "registry-mirrors": ["https://a4fyjv0u.mirr ...

  8. Pyrhon-OS库

    import os 导入OS模块 print(os.getcwd()) #获取当前路径 print(os.listdir()) #当前路径下文件信息 关于路径 Windows 下的路径采用 (\) 在 ...

  9. java: 非法字符: '\ufeff'

    错误问题记录: Error:(1, 1) java: 非法字符: '\ufeff' Error:(1, 1) 错误: 需要class, interface或enum报错 问题发生时因为编码问题导致,如 ...

  10. Vue富文本编辑器（图片拖拽缩放）

    富文本编辑器(图片拖拽缩放) 需求: 根据业务要求,需要能够上传图片,且上传的图片能在移动端中占满屏幕宽度,故需要能等比缩放上传的图片,还需要能拖拽.缩放.改变图片大小.尝试多个第三方富文本编辑器,很 ...