定时器的应用——div向右移动_div 内div内容局右-CSDN博客

本文链接：https://blog.csdn.net/mantou_riji/article/details/124053565

这段代码示例展示了如何通过JavaScript实现HTML元素（如div）的动态向右和向左移动效果，以及如何优化代码使其更灵活，支持对象的上下左右移动。代码中包含了获取元素样式值的函数，并使用定时器实现平滑移动。此外，还演示了如何将定时器与特定对象绑定，以避免全局变量污染。示例还展示了如何添加回调函数以实现更复杂的动画序列。

摘要由CSDN通过智能技术生成

点击按钮div向右移动

在这里插入图片描述

<!DOCTYPE html>
<html lang="zh">
  <head>
    <meta charset="UTF-8" />
    <style>
      * {
        margin: 0;
        padding: 0;
      }
      #box1 {
        width: 100px;
        height: 100px;
        background-color: salmon;
        position: absolute;
        left:0;/* 为使用IE做准备 */
      }
    </style>
    <script>
        // 根据元素的样式名获取样式值
      function getStyle(obj, name) {
        if (window.getComputedStyle) {
          // 正常浏览器
          return getComputedStyle(obj, null)[name];
          //    IE8
        } else {
          return obj.currentStrly[name];
        }
      }

      window.onload = function () {
        var box1 = document.getElementById("box1");
        var btn = document.getElementById("btn");
        var timer;

        btn.onclick = function () {

              clearInterval(timer);
          // 开启定时器执行动态效果
              timer = setInterval(function () {
              var left = parseInt(getStyle(box1,"left"));
              left = left +10;
              if(left > 800)//为了使能停在800px那条线上
              left = 800;
              box1.style.left = left + "px";

              if(left == 800)
              clearInterval(timer);

          }, 30);
        };
      };
    </script>
  </head>
  <body>
    <button id="btn">点击按钮，向右移动</button>
    <br /><br />
    <div id="box1"></div>
  </body>
</html>

div向左移动

<!DOCTYPE html>
<html lang="zh">
  <head>
    <meta charset="UTF-8" />
    <style>
      * {
        margin: 0;
        padding: 0;
      }
      #box1 {
        width: 100px;
        height: 100px;
        background-color: salmon;
        position: absolute;
        left:0;/* 为使用IE做准备 */
      }
    </style>
    <script>
        // 根据元素的样式名获取样式值
      function getStyle(obj, name) {
        if (window.getComputedStyle) {
          // 正常浏览器
          return getComputedStyle(obj, null)[name];
          //    IE8
        } else {
          return obj.currentStrly[name];
        }
      }

      window.onload = function () {
        var box1 = document.getElementById("box1");
        var btn = document.getElementById("btn");
        var btn2 =document.getElementById("btn2");
        var timer;

        btn.onclick = function () {

              clearInterval(timer);
          // 开启定时器执行动态效果
              timer = setInterval(function () {
              var left = parseInt(getStyle(box1,"left"));
              left = left +10;
              if(left > 800)//为了使能停在800px那条线上
              left = 800;
              box1.style.left = left + "px";

              if(left == 800)
              clearInterval(timer);

          }, 30);
        };

         btn2.onclick = function () {

              clearInterval(timer);
          // 开启定时器执行动态效果
              timer = setInterval(function () {
              var left = parseInt(getStyle(box1,"left"));
              left = left -10;
              if(left < 0)//为了使能停在800px那条线上
              left = 0;
              box1.style.left = left + "px";

              if(left == 0)
              clearInterval(timer);

          }, 30);
        };

      };
    </script>
  </head>
  <body>
    <button id="btn">点击按钮，向右移动</button>
    <button id="btn2">点击按钮，向左移动</button>
    <br /><br />
    <div id="box1"></div>
  </body>
</html>

优化写法：

<!DOCTYPE html>
<html lang="zh">
  <head>
    <meta charset="UTF-8" />
    <style>
      * {
        margin: 0;
        padding: 0;
      }
      #box1 {
        width: 100px;
        height: 100px;
        background-color: salmon;
        position: absolute;
        left:0;/* 为使用IE做准备 */
      }
    </style>
    <script>
        // 根据元素的样式名获取样式值
      function getStyle(obj, name) {
        if (window.getComputedStyle) {
          // 正常浏览器
          return getComputedStyle(obj, null)[name];
          //    IE8
        } else {
          return obj.currentStrly[name];
        }
      }

// speed<0向左移动
// speed>0向右移动
      var timer;
      function move(obj,target,speed){

            clearInterval(timer);
            var current = parseInt(getStyle(obj,"left"));
            if(target < current){
                speed = -speed;
            }
        // 开启定时器执行动态效果
            timer = setInterval(function () {
            var left = parseInt(getStyle(obj,"left"));
            left = left + speed;
            
            if(speed<0&&left<target || speed>0&&left>target){
                left = target;
            }
            obj.style.left = left + "px";

            if(left == target)
            clearInterval(timer);

        }, 30);

      }

      window.onload = function () {
        var box1 = document.getElementById("box1");
        var btn = document.getElementById("btn");
        var btn2 =document.getElementById("btn2");

        btn.onclick =function(){
          move(box1, 800 ,10);
        };   
        btn2.onclick = function(){
          move(box1, 0 ,10);
        };

      };
    </script>
  </head>
  <body>
    <button id="btn">点击按钮，向右移动</button>
    <button id="btn2">点击按钮，向左移动</button>
    <br /><br />
    <div id="box1"></div>
  </body>
</html>

问题：一个对象应该拿着一个定时器，所以定时器不能设置为全局变量。
向执行动画的对象中添加一个timer属性，用来保存它自己的定时器的标识。

<!DOCTYPE html>
<html lang="zh">
  <head>
    <meta charset="UTF-8" />
    <style>
      * {
        margin: 0;
        padding: 0;
      }
      #box1 {
        width: 100px;
        height: 100px;
        background-color: salmon;
        position: absolute;
        left:0;/* 为使用IE做准备 */
      }
       #box2 {
        width: 100px;
        height: 100px;
        background-color:rgb(236, 236, 166);
        position: absolute;
        left:0;/* 为使用IE做准备 */
        top:200px;
      }
    </style>
    <script>
        // 根据元素的样式名获取样式值
      function getStyle(obj, name) {
        if (window.getComputedStyle) {
          // 正常浏览器
          return getComputedStyle(obj, null)[name];
          //    IE8
        } else {
          return obj.currentStrly[name];
        }
      }

// speed<0向左移动
// speed>0向右移动
      var timer;
      function move(obj,target,speed){

            clearInterval(obj.timer);
            var current = parseInt(getStyle(obj,"left"));
            if(target < current){
                speed = -speed;
            }
        // 开启定时器执行动态效果
            obj.timer = setInterval(function () {
            var left = parseInt(getStyle(obj,"left"));
            left = left + speed;
            
            if(speed<0&&left<target || speed>0&&left>target){
                left = target;
            }
            obj.style.left = left + "px";

            if(left == target)
            clearInterval(obj.timer);

        }, 30);

      }

      window.onload = function () {
        var box1 = document.getElementById("box1");
        var box2 = document.getElementById("box2");
        var btn = document.getElementById("btn");
        var btn2 =document.getElementById("btn2");
        var btn3 =document.getElementById("btn3");
        var btn4 =document.getElementById("btn4");


        btn.onclick =function(){
          move(box1, 800 ,20);
        };   
        btn2.onclick = function(){
          move(box1, 0 ,10);
        };
         btn3.onclick = function(){
          move(box2, 800 ,10);
        };
         btn4.onclick = function(){
          move(box2, 0 ,10);
        };

      };
    </script>
  </head>
  <body>
    <button id="btn">点击按钮，box1向右移动</button>
    <button id="btn2">点击按钮，box1向左移动</button>
    <br><br>
    <button id="btn3">点击按钮，box2向右移动</button>
    <button id="btn4">点击按钮，box2向左移动</button>
    <br /><br />
    <div id="box1"></div>
    <div id="box2"></div>
  </body>
</html>

改进：更灵活地移动：上下左右

<!DOCTYPE html>
<html lang="zh">
  <head>
    <meta charset="UTF-8" />
    <style>
      * {
        margin: 0;
        padding: 0;
      }
      #box1 {
        width: 100px;
        height: 100px;
        background-color: salmon;
        position: absolute;
        left:0;/* 为使用IE做准备 */
      }
       #box2 {
        width: 100px;
        height: 100px;
        background-color:rgb(236, 236, 166);
        position: absolute;
        left:0;/* 为使用IE做准备 */
        top:200px;
      }
    </style>
    <script>
        // 根据元素的样式名获取样式值
      function getStyle(obj, name) {
        if (window.getComputedStyle) {
          // 正常浏览器
          return getComputedStyle(obj, null)[name];
          //    IE8
        } else {
          return obj.currentStrly[name];
        }
      }
// 对象
// speed<0向左移动
// speed>0向右移动
// target目的地
// attr:要执行动画的样式:left,top,width
// callback:回调函数中再嵌套回调函数,可以添加样式效果
      function move(obj,attr,target,speed,callback){

            clearInterval(obj.timer);
            var current = parseInt(getStyle(obj,attr));
            if(target < current){
                speed = -speed;
            }
        // 开启定时器执行动态效果
            obj.timer = setInterval(function () {
            var oldValue = parseInt(getStyle(obj,attr));
            newValue = oldValue + speed;
            
            if(speed<0&&newValue<target || speed>0&&newValue>target){
                newValue = target;
            }
            // attr是变量需要使用[]获取
            obj.style[attr] = newValue + "px";

            if(newValue == target){
              clearInterval(obj.timer);
              callback && callback();
            }

        }, 30);

      }

      window.onload = function () {
        var box1 = document.getElementById("box1");
        var box2 = document.getElementById("box2");
        var btn = document.getElementById("btn");
        var btn2 =document.getElementById("btn2");
        var btn3 =document.getElementById("btn3");
        var btn4 =document.getElementById("btn4");
        var btn5 =document.getElementById("btn5");
        var btn6 =document.getElementById("btn6");



        btn.onclick =function(){
          move(box1, "left", 800 ,20);
        };   
        btn2.onclick = function(){
          move(box1,"left", 0 ,10);
        };
         btn3.onclick = function(){
          move(box2,"left", 800 ,10);
        };
         btn4.onclick = function(){
          move(box2,"left", 0 ,10);
        };
         btn5.onclick = function(){
          move(box2,"width", 800 ,10);
        };
         btn6.onclick = function(){
          move(box2,"height", 200 ,10,function(){
              move(box2,"width", 800 ,10,function(){
                    move(box2,"top", 0 ,10,function(){

                    });
              });
          });
        };

      };
    </script>
  </head>
  <body>
    <button id="btn">点击按钮，box1向右移动</button>
    <button id="btn2">点击按钮，box1向左移动</button>
    <button id="btn3">点击按钮，box2向右移动</button>
    <button id="btn4">点击按钮，box2向左移动</button>
    <button id="btn5">点击按钮，box2变宽</button>
    <button id="btn6">点击按钮，box2改变</button>
    <div id="box1"></div>
    <div id="box2"></div>
  </body>
</html>