点击“开始运动”按钮，红色的#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. js 递归的理解

    友情提示:阅读本文需花 3分钟左右! 递归函数必须接受参数. (比如我要递归谁?) 在递归函数的定义初始,应该有一个判断条件,当参数满足这个条件的时候,函数停止执行,并返回值.(指定退出条件,否则就会 ...

  2. 习题3-4　周期串（Periodic Strings, UVa455）

    #include<stdio.h> #include<string.h> char s[100]; int main() { int T; scanf("%d&quo ...

  3. js改变,设置table单双行颜色,jquery改变,设置table单双行颜色

    1.js实现单双行以不同颜色显示 $(document).ready(function () { var color = "#ffeab3"; $("#GvList tr ...

  4. 【事件中心 Azure Event Hub】关于EventHub中出现Error时候的一些问题（偶发错误，EventHub后台升级，用户端错误，Retry机制的重要性）

    请问对偶发的定义是多少频率? 针对偶发的定义,主要是看发生的时间非常短,次数极少(如 10次以内),并且发生的时候EventHub其他分区或其他连接都是正常接收和发送数据.所以对于频率是没有明确的定义 ...

  5. Markdown基础知识

    一 Markdown简介 Markdown是⼀种可以使⽤普通⽂本编辑器编写的标记语⾔,通过简单的标记语法,它可以使普通⽂本内容具有⼀定的格式,可以简单理解为纯⽂本格式的word. 软件⼀般⽤vscod ...

  6. JDK新特性——Stream代码简洁之道的详细用法

    一.概述 Stream 是一组用来处理数组.集合的API,Stream API 提供了一种高效且易于使用的处理数据的方式. Java 8 中之所以费这么大的功夫引入 函数式编程 ,原因有两个: 代码简 ...

  7. Java SFTP 上传、下载等操作

    Java SFTP 上传.下载等操作 实际开发中用到了 SFTP 用于交换批量数据文件,然后琢磨了下这方面的东西,基于 JSch 写了个工具类记录下,便于日后使用. JSch是 SSH2 的纯Java ...

  8. Gym102012A Rikka with Minimum Spanning Trees

    题意 \(T\) 组数据,每组数据给定一个 \(n\) 个点,\(m\) 条边,可能含有重边自环的图,求出最小生成树的个数与边权和的乘积,对 \(10^9+7\) 取模. \(\texttt{Data ...

  9. 【译】Rust中的array、vector和slice

    原文链接:https://hashrust.com/blog/arrays-vectors-and-slices-in-rust/ 原文标题:Arrays, vectors and slices in ...

  10. NB-IOT的应用场景有哪些

    虽然抄表.停车.井盖监测等应用是最为常见的示范,但若低功耗广域网络仅限于这几个领域,则整个产业的规模就显得太小了.实际上,经过近两年的探索,目前示范应用的数量已有数十个,分布在各行各业,带来了大量的机 ...