匀速直线运动

ゞ浴缸里的玫瑰 2023-06-27 05:32 24阅读 0赞

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

<!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>