原生js实现九宫格抽奖动画

最新推荐文章于 2024-05-11 17:08:08 发布

一杯充满泡泡的可乐

最新推荐文章于 2024-05-11 17:08:08 发布

阅读量763

点赞数

分类专栏： h5 javascript 文章标签： javascript 前端开发语言

本文链接：https://blog.csdn.net/weixin_45781661/article/details/125979010

版权

h5 同时被 2 个专栏收录

15 篇文章 0 订阅

订阅专栏

javascript

13 篇文章 0 订阅

订阅专栏

原生js实现九宫格抽奖动画

样式及代码如下

在这里插入图片描述

<!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>
  <script type="text/javascript" src="js/jquery-3.2.1.min.js"></script>
  <style>
    .wrap {
      display: flex;
      flex-wrap: wrap;

    }

    .wrap li {
      width: 33.33%;
      height: 100px;
      background: pink;
      list-style: none;
      display: flex;
      justify-content: center;
      align-items: center;
      border: 3px solid white;
      box-sizing: border-box;
    }

    .ck {
      width: 33.33%;
      height: 100px;
      background: pink;
      list-style: none;
      display: flex;
      justify-content: center;
      align-items: center;
      border: 3px solid red !important;
      box-sizing: border-box;
    }
  </style>
</head>

<body>
  <div class="wrap">
    <li class="item">1</li>
    <li class="item">2</li>
    <li class="item">3</li>
    <li class="item">4</li>
    <li class="item-5">抽奖</li>
    <li class="item">6</li>
    <li class="item">7</li>
    <li class="item">8</li>
    <li class="item">9</li>
  </div>

  <script>
    $(function () {
      //点击开始抽奖
      var item = document.querySelectorAll(".item");
      var isStart = true;
      var time = null;
      var speed = 100;
      var index = 0; //随机奖项的索引
      var save = null;
      var count = 0;
      var num = 0;
      var arr = item.length;
      $('.item-5').on('click', function () {
        if (isStart) {
          isStart = false;
          index = Math.floor(Math.random() * arr);
          console.log('index: ', index);
          Rotate();
        }
      })

      function Rotate() {
        if (num >= item.length) {
          num = 0;
          count++;
        }
        if (save) {
          save.classList.remove("ck");
        }
        item[num].classList.add("ck");
        save = item[num];
        //对speed速度进行设置
        if (count < 6) {
          speed -= 2; //提速
        } else {
          //大于等于5圈,开始减速
          speed += 30;
        }
        //限制speed最小值
        if (speed <= 10) {
          speed = 10;
        }
        if (count >= 8 && num == index) {
          clearTimeout(time);
          return;
        }
        num++;
        time = setTimeout(Rotate, speed);
      }

    })
  </script>

</body>

</html>