记录JavaScript练习

<div id="lottery">
      <div class="box-one">1</div>
      <div class="box-two">2</div>
      <div class="box-three">3</div>
      <div class="box-four">4</div>
      <div class="box-five">5</div>
      <div class="box-six">6</div>
      <div class="box-seven">7</div>
      <div class="box-eight">8</div>
    </div>
    <button id="start-btn">开始抽奖</button>

    <style>
      #lottery {
      
      }
      .box-one {
        width: 100px;
        height: 100px;
        font-size: 50px;
        text-align: center;
        line-height: 100px;
        background-color: #fff;
        border: 1px solid black;
        margin: 5px;
        position: absolute;
        left: 330px;
        top: 6px;
      }
      .box-two {
        width: 100px;
        height: 100px;
        font-size: 50px;
        text-align: center;
        line-height: 100px;
        background-color: #fff;
        border: 1px solid black;
        margin: 5px;
        position: absolute;
        left: 440px;
        top: 6px;
      }
      .box-three {
        width: 100px;
        height: 100px;
        font-size: 50px;
        text-align: center;
        line-height: 100px;
        background-color: #fff;
        border: 1px solid black;
        margin: 5px;
        position: absolute;
        left: 550px;
        top: 6px;
      }
      .box-four {
        width: 100px;
        height: 100px;
        font-size: 50px;
        text-align: center;
        line-height: 100px;
        background-color: #fff;
        border: 1px solid black;
        margin: 5px;
        position: absolute;
        left: 550px;
        top: 120px;
      }
      .box-five {
        width: 100px;
        height: 100px;
        font-size: 50px;
        text-align: center;
        line-height: 100px;
        background-color: #fff;
        border: 1px solid black;
        margin: 5px;
        position: absolute;
        left: 550px;
        top: 234px;
      }
      .box-six {
        width: 100px;
        height: 100px;
        font-size: 50px;
        text-align: center;
        line-height: 100px;
        background-color: #fff;
        border: 1px solid black;
        margin: 5px;
        position: absolute;
        left: 440px;
        top: 234px;
      }
      .box-seven {
        width: 100px;
        height: 100px;
        font-size: 50px;
        text-align: center;
        line-height: 100px;
        background-color: #fff;
        border: 1px solid black;
        margin: 5px;
        position: absolute;
        left: 330px;
        top: 234px;
      }
      .box-eight {
        width: 100px;
        height: 100px;
        font-size: 50px;
        text-align: center;
        line-height: 100px;
        background-color: #fff;
        border: 1px solid black;
        margin: 5px;
        position: absolute;
        left: 330px;
        top: 120px;
      }
      
      .lottery-active {
        background-color: orange;
      }
      button{
        width: 100px;
        height: 100px;
        background-color: aqua;
        position: absolute;
        left:446px;
        top: 126px;
        
      }
      button:hover{
        cursor: grabbing;
      }
    </style>

    <script>
      let but = document.getElementById('start-btn');
      let lot = document.getElementById('lottery');
      let num = lot.getElementsByTagName('div');
      let i = 0;
      let speed = 0;
      let nums;
      let time = 500;
      but.onclick = button;
 
      function button() {
        num[i].style.backgroundColor = "orange";
        inner = setInterval(rotates, time)
        nums = Math.floor(Math.random() * num.length);
        console.log(nums);
        but.onclick = null
      }
 
      function rotates() {
        if (i < num.length - 1) {
          i++;
          num[i].style.backgroundColor = "orange";
          num[i - 1].style.backgroundColor = "white";
 
        } else {
          i = 0;
          num[i].style.backgroundColor = "orange";
          num[num.length - 1].style.backgroundColor = "white";
          speed++;
        }
        if (speed <= 3) {
          if (time <= 100) {
            time = 100;
          } else {
            time -= 50;
          }
        } else {
          if (time >= 500) {
            time = 500;
          } else {
            time += 50;
          }
        }
        console.log(time);
        if (i == nums && speed > 5) {
          clearInterval(inner)
          setTimeout(function() {
            alert("获得" + num[i].innerHTML);
            num[i].style.backgroundColor = "white";
            but.onclick = button;
            nums = 0;
            i = 0;
            time = 500;
            speed = 0;
          }, 200)
        } else {
          clearInterval(inner);
          inner = setInterval(rotates, time)
        }
      }
    </script>