点击“开始运动”按钮，红色的#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. docker-管理镜像常用命令

    1. docker管理镜像常用命令 指令 说明 docker   run     [容器 CONTAINER ID] 创建一个新的容器并运行一个命令 docker   start   [容器 CONT ...

  2. MeteoInfoLab脚本示例：SeaWiFS HDF Grid数据

    SeaWiFS HDF Grid数据读取,特别是涉及到了文件的众多属性数据的读取,数据取对数后绘图.脚本程序: #Add data file f = addfile('D:/Temp/hdf/S199 ...

  3. 对json数组按照id精确查询并修改值

    //json数组,里面有一个id等于5的,班级的标识和名称不是该班级,通过id把班级信息修改为指定的信息 var zNodes=[ { id:1, classid:1, className:" ...

  4. spring boot:spring security+oauth2+sso+jwt实现单点登录(spring boot 2.3.3)

    一,sso的用途 ? 1,如果有多个应用系统,用户只需要登录一次就可以访问所有相互信任的应用系统. 不需要每次输入用户名称和用户密码, 也不需要创建并记忆多套用户名称和用户密码. 2,系统管理员只需维 ...

  5. nfs4使用中的防火墙配置

    一,查看本地centos的版本: [root@localhost lib]# cat /etc/redhat-release CentOS Linux release 8.1.1911 (Core) ...

  6. ImageMagick实现图片加水印(ImageMagick6.9.10)

    一,ImageMagick的安装 请参见: https://www.cnblogs.com/architectforest/p/12807514.html 说明:刘宏缔的架构森林是一个专注架构的博客, ...

  7. PHP获取当前毫秒级别时间戳

    PHP提供了一个microtime()函数,调用时不带可选参数,本函数以"msec sec"的格式返回一个字符串,其中 sec 是自 Unix 纪元(0:00:00 January ...

  8. Linux关机时执行指定脚本

    要实现在Linux关机时执行某个脚本的具体思路 1.在文件夹 /etc/init.d/ 下创建关机时需要执行的脚本 file_name; 2.分别在文件夹 /etc/rc0.d/ 和 /etc/rc6 ...

  9. subprocess中命令为参数序列和字符串的区别

    参数args 参数args可以是一个参数序列,也可以是一个单独的字符串.参数序列通常是首选的,因为它允许模块处理参数的转义和引号(例如,允许文件名中有空格). 如果传递参数序列,默认情况下,程序执行序 ...

  10. xUtils简介和使用方法

    xUtils简介 xUtils 包含了很多实用的android工具. xUtils 最初源于Afinal框架,进行了大量重构,使得xUtils支持大文件上传,更全面的http请求协议支持(10种谓词) ...