点击“开始运动”按钮，红色的#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. mysql DISTINCT选取多个字段，获取distinct后的行信息

    背景:      a表保存关联关系,通过ACode 获取该关系中的所有 BCode, 并获取所有Bcode-max(Bvrsn)的信息  Bnm 表a 表b          循序渐进:        ...

  2. 深入了解Redis(7)-缓存穿透,雪崩,击穿

    redis作为一个内存数据库,在生产环境中使用会遇到许多问题,特别是像电商系统用来存储热点数据,容易出现缓存穿透,雪崩,击穿等问题.所以实际运用中需要做好前期处理工作. 一.缓存雪崩 1.概念 缓存雪 ...

  3. JSON,数组根据字段多次分组

    我们在前端开发过程中,遇到json对象,有时会需要多次分组.比如说,先按照是业务分组,然后再按照产品线分组,然后通过table或其他方式展示或操作 var obj1=[ { "demp&qu ...

  4. 【线段树】BZOJ 5334 数学计算

    题目内容 小豆现在有一个数\(x\),初始值为\(1\).小豆有\(Q\)次操作,操作有两种类型: 1 m:\(x=x×m\),输出\(x\ mod\ M\): 2 pos:\(x=x/\)第\(po ...

  5. laravel设置excel高度

    <?php use App\Services\UploadService; use Maatwebsite\Excel\Facades\Excel; class ExcelTest extend ...

  6. Centos定时备份 MySQL数据库

    一.编写数据库备份脚本 backupmysql.sh #!/bin/bash # Name:bakmysql.sh # This is a ShellScript For Auto DB Backup ...

  7. tr命令-转换和删除字符

    tr 转换和删除字符 支持标准输入 格式 tr [OPTION]...SET1[SET2] Translate, squeeze, and/or delete characters from stan ...

  8. [阿里DIN]从论文源码学习 之 embedding_lookup

    [阿里DIN]从论文源码学习 之 embedding_lookup 目录 [阿里DIN]从论文源码学习 之 embedding_lookup 0x00 摘要 0x01 DIN代码 1.1 Embedd ...

  9. Tomcat8升级后URL中特殊字符报错出现原因

    请求带上花括号等字符,请求无法送达服务端,报错: Failed to load resource: the server responded with a status of 400 () https ...

  10. JAVA代码实现抖音短视频去水印功能

    今天有人找我帮他抖音视频去水印,发到朋友圈,然后就研究了一下.去水印功能代码如下: public class DouYinQushuiyin { public static void main(Str ...