master

分支 (1)

管理

管理

master

blog
/
index.html

<!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>Document</title>
    <style>
      .warp {
        position: relative;
        margin: auto;
        width: 300px;
        /* border: 1px solid black; */
      }

      .item {
        width: 100px;
        height: 100px;
        background-color: rgb(226, 235, 143);
        border: 1px solid #fff;
        box-sizing: border-box;
        position: absolute;
      }
      .active {
        background-color: red;
      }
      #d2 {
        left: 100px;
      }
      #d3 {
        left: 200px;
      }
      #d4 {
        left: 200px;
        top: 100px;
      }
      #d5 {
        left: 200px;
        top: 200px;
      }
      #d6 {
        left: 100px;
        top: 200px;
      }
      #d7 {
        top: 200px;
      }
      #d8 {
        top: 100px;
      }
      .an {
        position: absolute;
        left: 100px;
        top: 320px;
      }
      .img1 {
        position: absolute;
        left: 100px;
        top: 100px;
        background-color: rgb(226, 235, 143);
      }
    </style>
  </head>
  <body>
    <div class="warp">
      <div class="an">
        <button onclick="trigger(true)">开始</button>
        <button onclick="trigger(false)">结束</button>
      </div>
      <div class="img1">
        <img src="./img/99.png" alt="" width="100px" height="100px" />
      </div>
      <div class="item active" id="d1">
        <img src="./img/11.png" alt="" width="100px" height="100px" />
      </div>
      <div class="item" id="d2">
        <img src="./img/22.png" alt="" width="100px" height="100px" />
      </div>
      <div class="item" id="d3">
        <img src="./img/33.png" alt="" width="100px" height="100px" />
      </div>
      <div class="item" id="d4">
        <img src="./img/44.png" alt="" width="100px" height="100px" />
      </div>
      <div class="item" id="d5">
        <img src="./img/55.png" alt="" width="100px" height="100px" />
      </div>
      <div class="item" id="d6">
        <img src="./img/66.png" alt="" width="100px" height="100px" />
      </div>
      <div class="item" id="d7">
        <img src="./img/77.png" alt="" width="100px" height="100px" />
      </div>
      <div class="item" id="d8">
        <img src="./img/110.png" alt="" width="100px" height="100px" />
      </div>
    </div>
  </body>
  <script>
    // 查找所有的抽奖方块
    var sqrs = document.querySelectorAll(".item");
    // 记录抽奖方块的下标 , 计时器 , 计时器速度设置
    var index = 0,
      timmer,
      speed = 500;

    // 修改类名
    function changeActive() {
      index = index < 7 ? ++index : 0;
      // if(index < 7){ index = index + 1
      // }else{ index = 0 }
      // 去掉所有方块的active属性
      sqrs.forEach((item) => item.setAttribute("class", "item"));
      // 将下标对应的方块的active属性添加上
      sqrs[index].setAttribute("class", "item active");
    }

    // 修改速度
    function changeSpeed(flag) {
      // 加速
      if (flag) {
        var up = setInterval(function () {
          // speed = speed > 100 ? speed - 50 : clearInterval(up)
          if (speed > 100) {
            speed = speed - 50;
            // 清除旧的改变类名计时器，并设置新的
            clearInterval(timmer);
            timmer = setInterval(changeActive, speed);
          } else {
            clearInterval(up);
          }
        }, 300);
      } else {
        // 减速
        var down = setInterval(function () {
          // speed = speed < 600 ? speed + 50 : clearInterval(up)
          if (speed < 600) {
            speed = speed + 100;
            // 清除旧的改变类名计时器，并设置新的
            clearInterval(timmer);
            timmer = setInterval(changeActive, speed);
          } else {
            clearInterval(down);
            // 在0.8秒之后，结束动画执行
            setTimeout(function () {
              clearInterval(timmer);
            //   var a = [
            //     "恭喜你中了吹风机",
            //     "恭喜你中了耳机",
            //     "恭喜你中了一千万奖金",
            //     "恭喜你中了一台平板",
            //     "恭喜你中了一台手机",
            //     "恭喜你中了毛绒玩具",
            //     "恭喜你中了一辆汽车",
            //     "谢谢参与",
            //   ];
            //   alert(a[index]);
            }, 800);
          }
        }, 500);
      }
    }

    function trigger(flag) {
      if (flag) {
        console.log("开始");
        changeSpeed(true);
      } else {
        console.log("结束");
        changeSpeed(false);
      }
    }
  </script>
</html>