点击“开始运动”按钮，红色的#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. git fatal: Path 'XXX' is in submodule 'XXX'错误

    easyswoole项目的 vendor/easyswoole/socket/这个项目怎么都无法添加到git目录里面. 报错: Administrator@PhpServer MINGW64 /z/w ...

  2. 记录一次源码扩展案列——FastJson自定义反序列化ValueMutator

    背景:曾经遇到一个很麻烦的事情,就是一个json串中有很多占位符,需要替换成特定文案.如果将json转换成对象后,在一个一个属性去转换的话就出出现很多冗余代码,不美观也不是很实用. 而且也不能提前在j ...

  3. IDEA 简拼输入

    1. sout = System.out.println(); 2. soutp = System.out.println(""); 3. soutv = System.out.p ...

  4. docket镜像

    1.是什么 镜像是一种轻量级.可执行的独立软件包,用来打包软件运行环境和基于运行环境开发的软件,它包含运行某个软件所需的所有内容,包括代码.运行时.库.环境变量和配置文件. 1.1.什么是UnionF ...

  5. laravel重写

    laravel location / { try_files $uri $uri/ /index.php?$query_string; } ci location / { try_files $uri ...

  6. selenium分布式启动(deepin)

    1.deepin安装jdk: 下载地址:链接:https://pan.baidu.com/s/19-pU8G6RzMW92uBCxBH7sA 密码:1c7n 解压:tar -zxvf jdk-8u20 ...

  7. 64位Ubuntu14.04配置adb后提示No such file or directory

    配置好SDK的环境变量后,输入adb提示 No such file or directory. 原因:由于是64位的linux系统,而Android SDK只有32位的,需要安装一些支持包才能使用 1 ...

  8. StringUtils工具类(Apache lang3 )

    引入依赖 <dependency> <groupId>org.apache.commons</groupId> <artifactId>commons- ...

  9. D. Palindromic characteristics 解析(DP)

    Codeforce 835 D. Palindromic characteristics 解析(DP) 今天我們來看看CF835D 題目連結 題目 略,請看原題 前言 想不到這種狀態... @copy ...

  10. Eclipse IDE 使用指南：Git失误提交代码，撤销commit操作

    在Eclipse IDE使用Git Commit提交代码时把不需要的文件失误Commit了,比如.settings..classpath..project等文件. 如果是Commit提交代码到本地仓库 ...