html、js实现转盘抽奖

咱们不气

已于 2024-10-16 08:42:40 修改

阅读量741

点赞数 3

文章标签： css javascript 前端 html

于 2024-10-12 09:33:42 首次发布

本文链接：https://blog.csdn.net/qq_52532624/article/details/142869238

版权

效果图：

代码：

<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>幸运大转盘</title>
  <style>
    * {
      margin: 0;
      padding: 0;
    }

    .box {
      width: 500px;
      height: 500px;
      margin: 100px auto;
    }

    ul {
      display: flex;
      flex-wrap: wrap;
      justify-content: space-between;
    }

    ul li {
      list-style: none;
      width: 150px;
      height: 150px;
      background-color: #F1F2F3;
      margin: 5px;
      font-size: 25px;
      text-align: center;
      line-height: 150px;
    }

    ul li img {
      width: 100%;
      height: 100%;
    }

    .text {
      text-align: center;
      margin-top: 20px;
      font-size: 25px;
      color: red;
    }

    .active {
      background-color: rgb(93, 221, 157);
    }
  </style>
</head>

<body>
  <div class="box">
    <ul>
      <!-- 注意这里的类名是按照旋转速度来规范的 : item_index  为了方便我们后续再写js代码操作时更方便-->
      <li class="item_1">奖品一</li>
      <li class="item_2">奖品二</li>
      <li class="item_3">奖品三</li>
      <li class="item_8">奖品四</li>
      <li class="btn" style="background-color: #fff;">
        <button style="margin: 14px; width: 120px;height: 120px;background-color: pink;border: #fff;">点击抽奖</button>
      </li>
      <li class="item_4">奖品五</li>
      <li class="item_7">奖品六</li>
      <li class="item_6">奖品七</li>
      <li class="item_5">奖品八</li>
    </ul>
    <!-- 这里到时候放中奖信息的文字 -->
    <div class="text"></div>
  </div>
  <script>
    //简易的抽奖功能
    const obj = {
      text: document.querySelector('.text'),
      btn: document.querySelector('.btn'),
    }
    const item = document.querySelectorAll('ul li')
    let rollTime; // 定义定时器变量用来清除定时器
    let time = 0; // 转动次数
    let speed = 10; // 转动时间间隔
    let times; // 总转动次数
    let sum = 0; //计算切换总次数
    //按钮点击事件
    obj.btn.addEventListener('click', () => {
      obj.text.innerHTML = ''; //清空文字
      times = parseInt(Math.random() * (20 - 30 + 1) + 50, 10); // 定义总转动次数，随机20-30次
      console.log(times);
      time = 0
      sum = 0
      spin()
    })
    //写一个函数用来模拟轮盘抽奖，旋转次数也是模拟的

    function spin() {
      time++; // 转动次数加1
      sum++; //总转动次数加1
      //判断time是否大于8
      time = time > 8 ? 1 : time;
      //先清空其他的带有active类的li
      item.forEach(item => {
        item.classList.remove('active')
      })
      clearTimeout(rollTime);
      //给带有类名item_1的加上类名
      document.querySelector(`.item_${time}`).classList.add('active')
      rollTime = setTimeout(() => {
        window.requestAnimationFrame(spin); // 进行递归动画 这段代码的作用是启动一个动画帧，以便在浏览器中渲染动画效果。动画帧是通过调用requestAnimationFrame()方法实现的，它允许你在动画帧中执行代码，而不是直接设置元素的样式。这样可以确保在渲染过程中不会出现跳帧的情况，从而实现毫秒级的渲染效果。
      }, speed * sum)

      if (sum === times) {
        clearTimeout(rollTime); //清除定时器
        //找出带有active类名的文字
        const active = document.querySelector('.active').innerHTML
        obj.text.innerHTML = `恭喜你抽中了${active}`
        return
      }
    }

  </script>
</body>

</html>

也可以看看我的另一篇文章：HTML抽奖转盘_html抽奖源码-CSDN博客