Question

我的网页上有三个蓝色方块。每个正方形的尺寸为50px乘50px。我希望将每个方块的大小逐渐增加到80px，一个接一个地增加80px。而不是上面的预期结果，只有最后的方块大小改变了。

请问如何让下面的代码生效。

＆＃13;

<!DOCTYPE html>
<html>

<head>
  <title>zoom box</title>
  <script>
    function zoom() {
      var box;
      const height = 50;
      var boxes = document.getElementsByClassName('box');
      var id;
      for (i = 0; i < boxes.length; i++) {
        box = boxes[i];
        h = height;
        frame();
      }

      function frame() {
        h++;
        if (h >= 80) {
          return;
        }

        box.style.height = h + 'px';
        box.style.width = h + 'px';

        setTimeout(frame, 100);

      }
    }
  </script>

  <head>

    <body width="100%" height="100%" onload="zoom()">
      <div style="width: 20em; height: 20em; margin:auto; border-style:solid;display:flex; justify-content: space-between;">

        <div class="box" style="background-color: blue; width:50px; height: 50px; margin:auto">

        </div>

        <div class="box" style="background-color: blue; width:50px; height: 50px; margin:auto">

        </div>

        <div class="box" style="background-color: blue; width:50px; height: 50px; margin:auto">

        </div>
      </div>
    </body>

</html>

＆＃13;

Answer 1

function zoom() {
      var box;
      const height = 50;
      var boxes = document.getElementsByClassName('box');
      var array = [];
      var id;
      for (var i = 0; i < boxes.length; i++) {
        box = boxes[i];
        console.log(box)
        h = height;
        if(i == 0){
            array[i] = true;
        }else{
            array[i] = false;
        }
        frame(box,i,height);
    }

      function frame(box,i,h) {


        if (h >= 80) {
          for(var j  = 0; j < array.length ; j++){
            if(j != i && array[j] == false){
                array[j] = true;
                break;
            }
          }
          array[i] = true;
          return box;
        }
        console.log(i + " " + array[i]);
        if(array[i]){
            h++;
            box.style.height = h + 'px';
            box.style.width = h + 'px';
        }

        setTimeout(function(){
            frame(box,i,h);
        }, 100);

      }
    }

使用普通javascript在循环中动画多个div

1 个答案: