望大佬求助

编的JS代码，只能运行HTML部分。JS废了。
求助

HTML

<!DOCTYPE html>
<html>
  <head>
    <title>test</title>
    <meta charset="UTF-8">
    <style>
      .container {
        position: relative; /* 设置为 relative，使其成为一个已定位的父元素 */
        width: 300px;
        height: 300px;
      }
 
      .child {
        position: absolute; /* 设置为 absolute 进行绝对定位 */
        width: 100px;
        height: 100px;
        border: 1px solid black;
        display: flex;
        justify-content: center; /* 水平居中 */
        align-items: center;
      }
      .colored {
        background-color: red;
      }
      .uncolored {
        background-color: white;
      }
    </style>
  </head>
  <body>
    <div class="container">
      <div class="child" style="top:0px;left:0px;" id="1">1</div>
      <div class="child" style="top:0px;left:100px;" id="2">2</div>
      <div class="child" style="top:0px;left:200px;" id="3">3</div>
      <div class="child" style="top:100px;left:0px;" id="8">8</div>
      <div class="child" style="top:100px;left:200px;" id="4">4</div>
      <div class="child" style="top:200px;left:0px;" id="7">7</div>
      <div class="child" style="top:200px;left:100px;" id="6">6</div>
      <div class="child" style="top:200px;left:200px;" id="5">5</div>
    </div>
    <script>
      var calss1 = document.createAttribute("class");
      calss1.value = "colored";
      var calss2 = document.createAttribute("class");
      calss2.value = "uncolored";
      var ids = ["1","2","3","4","5","6","7","8"];
      var cnt = 0;
      var rand = Math.ceil(Math.random() * 15 + 5);
      let newInterval = setInterval(function(){
        let childElems = document.querySelectorAll(".child");
        for(var i = 0;i < childElems.length;i++){
          childElems[i].setAttribute(calss2);
        }
        let elem = document.getElementById(ids[cnt]);
        elem.setAttribute(calss1);
        cnt++;
        if(cnt === rand){
          clearInterval(newInterval);
        }
      },500);
    </script>
  </body>
</html>

讨论操作

回复

相关推荐

望大佬求助