匀速直线运动

最新推荐文章于 2022-02-05 08:56:27 发布

&XYZ&

最新推荐文章于 2022-02-05 08:56:27 发布

阅读量431

点赞数

分类专栏： JavaScript

本文链接：https://blog.csdn.net/JEFF_luyiduan/article/details/103821605

版权

JavaScript 专栏收录该内容

73 篇文章 2 订阅

订阅专栏

物体直线运动(从左向右运动)：

<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <title>温故而知新</title>
  <style>
    div {
      width: 100px;
      height: 100px;
      background-color: #ff0000;
      position: absolute;
      left: 0px;
      top: 0px;
    }

    span {
      position: absolute;
      width: 1px;
      height: 100px;
      background-color: #333333;
      top: 0;
      left: 300px;
    }

    button {
      margin-top: 200px;
    }
  </style>
</head>

<body>
  <div></div>
  <span></span>
  <button>点击移动方格</button>
</body>
<script>
  /*
    物体直线运动(从左向右运动)
  */
  let div = document.getElementsByTagName("div")[0];
  const button = document.getElementsByTagName("button")[0];
  let moveDiv = null;
  button.onclick = function () {
    clearInterval(moveDiv)
    const moveDistance = 7;
    moveDiv = setInterval(function () {
      if (300 - div.offsetLeft < moveDistance) {
        div.style.left = '300px';
        clearInterval(moveDiv)
      } else {
        div.style.left = div.offsetLeft + moveDistance + 'px';
      }
    }, 70)
  }
</script>

</html>

物体直线运动(从右向左运动)：

<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <meta http-equiv="X-UA-Compatible" content="ie=edge">
  <title>温故而知新</title>
  <style>
    div {
      width: 100px;
      height: 100px;
      background-color: #ff0000;
      position: absolute;
      left: 600px;
      top: 0px;
    }

    span {
      position: absolute;
      width: 1px;
      height: 100px;
      background-color: #333333;
      top: 0;
      left: 300px;
    }

    button {
      margin-top: 200px;
    }
  </style>
</head>

<body>
  <div></div>
  <span></span>
  <button>点击移动方格</button>
</body>
<script>
  /*
    物体直线运动(从右向左运动)
  */
  let div = document.getElementsByTagName("div")[0];
  const button = document.getElementsByTagName("button")[0];
  let moveDiv = null;
  button.onclick = function () {
    clearInterval(moveDiv)
    const moveDistance = 300 - div.offsetLeft > 0 ? 7 : -7;
    moveDiv = setInterval(function () {
      if (Math.abs(300 - div.offsetLeft) < Math.abs(moveDistance)) {
        div.style.left = '300px';
        clearInterval(moveDiv)
      } else {
        div.style.left = div.offsetLeft + moveDistance + 'px';
      }
    }, 70)
  }
</script>

</html>

物体直线运动(将代码封装成为starMove方法去调用，并且为了让这个方法更灵活，将指定三个参数：

第一个参数是指定移动的元素elem；

第二个参数是每次移动的距离distance；

第三个参数是移动到哪个位置；

<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <meta http-equiv="X-UA-Compatible" content="ie=edge">
  <title>温故而知新</title>
  <style>
    div {
      width: 100px;
      height: 100px;
      background-color: #ff0000;
      position: absolute;
      left: 0px;
      top: 0px;
    }

    span {
      position: absolute;
      width: 1px;
      height: 100px;
      background-color: #333333;
      top: 0;
      left: 300px;
    }

    button {
      margin-top: 200px;
    }
  </style>
</head>

<body>
  <div></div>
  <span></span>
  <button>点击移动方格</button>
</body>
<script>
  /*
    物体直线运动(将代码封装成为starMove方法去调用，并且为了让这个方法更灵活，
    将指定两个参数：
    第一个参数是指定移动的元素elem；
    第二个参数是每次移动的距离distance；
    第三个参数是移动到哪个位置；
    )
  */
  let div = document.getElementsByTagName("div")[0];
  const button = document.getElementsByTagName("button")[0];
  button.onclick = function () {
    starMove(div, 7, 300)
  }

 function starMove(elem, distance, site) {
    let moveDiv = null;
    clearInterval(moveDiv)
    const moveDistance = site - elem.offsetLeft > 0 ? distance : -distance;
    moveDiv = setInterval(function () {
      if (Math.abs(site - elem.offsetLeft) < Math.abs(moveDistance)) {
        elem.style.left = site + "px";
        clearInterval(moveDiv)
      } else {
        elem.style.left = elem.offsetLeft + moveDistance + 'px';
      }
    }, 70)
  }
</script>

</html>