JavaScript，利用实现定时器setInterval的实现案例

脚踏实地，坚持不懈!
已于 2022-08-28 09:06:57 修改
阅读量165
点赞数
文章标签： javascript css3 前端
于 2022-08-23 17:05:04 首次发布
本文链接：https://blog.csdn.net/weixin_43228946/article/details/126488665
版权
我们可以通过button设置div的移动。
案例代码如下：
<!DOCTYPE html>
<html lang="en">

<head>
                  <meta charset="UTF-8">
                  <meta http-equiv="X-UA-Compatible" content="IE=edge">
                  <meta name="viewport" content="width=device-width, initial-scale=1.0">
                  <title>案例057</title>
                  <style>
                                    * {
                                                      margin: 0;
                                                      padding: 0;
                                    }

                                    #box1 {
                                                      width: 200px;
                                                      height: 200px;
                                                      background-color: yellow;
                                                      left: 0;
                                                      position: absolute;
                                    }

                                    #box2 {
                                                      width: 200px;
                                                      height: 200px;
                                                      background-color: rgb(0, 110, 255);
                                                      left: 0;
                                                      position: absolute;
                                                      top: 230px;
                                    }

                                    #finishLine {
                                                      width: 0;
                                                      height: 100%;
                                                      border-left: 1px black solid;
                                                      position: absolute;
                                    }
                  </style>
                  <script>
                                    window.onload = function () {
                                                      var finishLine = document.getElementById("finishLine");
                                                      var btn1 = document.getElementById("btn1");
                                                      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");
                                                      var box1 = document.getElementById("box1");
                                                      var box2 = document.getElementById("box2");
                                                      btn1.onclick = function () {
                                                                        //控制box1向右移动
                                                                        console.log("控制box1向右移动");
                                                                        controlMove(box1, "left", 10, 1000, function () {
                                                                                          //暂时不设置
                                                                                          console.log("移动完毕！！！");
                                                                        });
                                                      };
                                                      btn2.onclick = function () {
                                                                        //控制box1向左移动
                                                                        console.log("控制box1向左移动");
                                                                        controlMove(box1, "left", 10, 0, function () {
                                                                                          //暂时不设置
                                                                        });
                                                      };
                                                      btn3.onclick = function () {
                                                                        //控制box2向右移动
                                                                        console.log("控制box2向右移动");
                                                                        controlMove(box2, "left", 20, 1000, function () {
                                                                                          //暂时不设置
                                                                                          console.log("移动完毕！！！");
                                                                        });
                                                      };
                                                      btn4.onclick = function () {
                                                                        //控制box2向左移动
                                                                        console.log("控制box2向左移动");
                                                                        controlMove(box2, "left", 20, 0, function () {
                                                                                          //暂时不设置
                                                                        });
                                                      };
                                                      btn5.onclick = function () {
                                                                        //box1和box2一起向右边移动过
                                                                        console.log("box1和box2一起向右边移动过");
                                                                        allCotrolMove(box1, box2, 20, 30);
                                                      };
                                                      btn6.onclick = function () {
                                                                        //特殊移动过方式的按钮
                                                                        console.log("特殊移动");
                                                                        /*
                                                                           controlMove这个函数既可以设置obj的left,
                                                                           也可以设置其他属性的动画（top,width,height）
                                                                        */
                                                                        controlMove(box2, "left", 10, 1000, function () {
                                                                                          controlMove(box2, "height", 10, 500, function () {
                                                                                                            controlMove(box2, "width", 10, 800, function () {
                                                                                                                              controlMove(box2, "top", 10, 0, function () {
                                                                                                                                                alert("运动完毕");
                                                                                                                              })
                                                                                                            });
                                                                                          });
                                                                        });

                                                      };
                                                      //var timer = null;

                                                      /*
                                                          定义一个函数可以随意控制
                                                          obj:对象，这里一般指的是box1,box2
                  
                                                      */
                                                      function controlMove(obj, attr, speed, target, callback) {
                                                                        clearInterval(obj.timer);
                                                                        console.log("controlMove----start" + "+" + obj);
                                                                        /*
                                                                            1.获取obj的位置
                                                                            2.设置obj移动的速度
                                                                            3.设置obj移动的终点线
                                                                            4.设置该函数的回调函数
                                                                        */
                                                                        //1.获取obj的位置
                                                                        var currentPosition = parseInt(getCSSstyle(obj, attr));
                                                                        console.log("打印出" + obj + "当前的位置:" + currentPosition);
                                                                        //2.设置obj移动的速度主要是移动方向
                                                                        /*
                                                                            如果obj所在的位置大于目标位置，
                                                                            那么obj的速度就负数，否则就为正数
                                                                        */
                                                                        if (currentPosition > target) {
                                                                                          speed = -speed;
                                                                        }
                                                                        /*
                                                                           我们可以在这里实现一个定时器
                                                                           用这个定时器来实现obj的移动
                                                                        */
                                                                        obj.timer = setInterval(function () {
                                                                                          //获取box1的原来的left值
                                                                                          var oldValue = parseInt(getCSSstyle(obj, attr));
                                                                                          var newValue = oldValue + speed;
                                                                                          if ((speed < 0 && newValue < target) || (speed > 0 && newValue > target)) {
                                                                                                            newValue = target;
                                                                                          }
                                                                                          console.log("旧值：" + oldValue + ",新值:" + newValue + ",终点线:" + target);

                                                                                          obj.style[attr] = newValue + "px";
                                                                                          if (newValue === target) {
                                                                                                            clearInterval(obj.timer);
                                                                                                            callback && callback();
                                                                                          }
                                                                        }, 30);

                                                                        /*
                                                                           在这里我们设置一下，
                                                                           当我们的obj从左至右移动，
                                                                           我们可以设置一下终点线
                                                                        */
                                                                        if (attr == "left") {
                                                                                          finishLine.style["left"] = target + "px";
                                                                        }

                                                      }

                                                      //获取obj当前的CSS属性
                                                      function getCSSstyle(obj, name) {
                                                                        if (window.getComputedStyle) {
                                                                                          //正常浏览器的方式，具有getComputedStyle()方法
                                                                                          return getComputedStyle(obj, null)[name];
                                                                        } else {
                                                                                          //IE8的方式，没有getComputedStyle()方法
                                                                                          return obj.currentStyle[name];
                                                                        }
                                                      }

                                                      /*
                                                          同时控制两个div同时移动，比较那个更先到达终点
                                                          在这里需要注意下，我们这里两个div都是同时向右移动
                                                      */
                                                      function allCotrolMove(box1, box2, boxSpeed1, boxSpeed2) {
                                                                        // var boxSpeed1 = 20;
                                                                        //var boxSpeed2 = 30;
                                                                        //使用两个div同时启动
                                                                        controlMove(box1, "left", boxSpeed1, 1000, function () {
                                                                                          console.log("box1和box2同时启动啦");
                                                                        });
                                                                        controlMove(box2, "left", boxSpeed2, 1000, function () {
                                                                                          console.log("box1和box2同时启动啦");
                                                                        })
                                                                        boxSpeed1 > boxSpeed2 ? (console.log("box1比box2快到达终点")) : (console.log("box2比box1快到达终点"))

                                                      }
                                    }

                  </script>
</head>

<body>
                  <button id="btn1">box1向右移动</button>
                  <button id="btn2">box1向左移动</button>
                  <button id="btn3">box2向右移动</button>
                  <button id="btn4">box2向左移动</button>
                  <button id="btn5">box1和box2一起向右边移动过</button>
                  <button id="btn6">特殊按钮</button>
                  <div id="box1"></div>
                  <div id="box2"></div>
                  <div id="finishLine"></div>

</body>

</html>