用html+js实现9宫格翻牌抽奖【建议收藏】

最新推荐文章于 2025-03-07 17:43:10 发布

沐阳gg

最新推荐文章于 2025-03-07 17:43:10 发布

阅读量1.6k

点赞数 4

分类专栏： html从入门到入土文章标签： javascript html css

本文链接：https://blog.csdn.net/qq_52545155/article/details/129159525

版权

html从入门到入土专栏收录该内容

36 篇文章

订阅专栏

在前端浏览器页面，我们想实现抽奖的功能，铁子们可以朝这儿看齐，9个格子可以填写9份礼物，而且礼物可以控制位置，公司举办活动啥的直接就能用，方便实用；

1、效果展示

2、代码分享

<!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>9宫格翻牌抽奖</title>
  <style>
    .title {
      text-align: center;
    }

    .box {
      display: flex;
      flex-wrap: wrap;
      justify-content: center;
      width: 330px;
      margin: 0 auto;
    }

    .item {
      position: relative;
      margin: 5px;
      width: 100px;
      height: 100px;
    }

    .style1,
    .style2 {
      position: absolute;
      left: 0;
      top: 0;
      bottom: 0;
      right: 0;
      display: flex;
      justify-content: center;
      align-items: center;
      border-radius: 5px;
      text-align: center;
      transition: transform .4s
    }

    .style1 {
      background-color: #ff8800;
      color: #fff;
    }

    .style2 {
      color: #ff8800;
      border: 1px solid #ff8800;
      padding: 0 10px;
      transform: scaleX(0);
      background-color: #ffe6c9;
    }

    .hide {
      transform: scaleX(0);
    }

    .show {
      transform: scaleX(1);
    }

    .show-result {
      transform: scaleX(1);
      opacity: 0.5;
    }
  </style>
</head>
<style>
</style>

<body>
  <div class="title">可抽奖<label id="count">0</label>次</div>
  <div class="box"></div>
</body>
<script>
  // 奖品列表
  const list = [
    { id: 1, name: '1元优惠券', is: true },
    { id: 2, name: '10元优惠券', is: true },
    { id: 3, name: '谢谢惠顾', is: true },
    { id: 4, name: '豪华电动车' },
    { id: 5, name: '1w购物券' },
    { id: 6, name: '5w购物券' },
    { id: 7, name: '豪华轿车' },
    { id: 8, name: '房子一套' },
    { id: 9, name: '顶配笔记本' }
  ].sort(v => Math.random() - 0.5)
  // 中奖项
  const isArr = list.filter(v => v.is)
  // 非中奖项
  const noArr = list.filter(v => !v.is)
  // 抽奖次数
  let count = 3
  const box = document.querySelector('.box')
  const countEL = document.querySelector('#count')
  countEL.innerHTML = count
  box.innerHTML = list.map(v => {
    return `<div class="item" onclick="fp(this)">
            <div class="style1">抽奖</div>
            <div class="style2"></div>
        </div>`
  }).join('')
  // 翻牌抽奖
  const fp = (me) => {
    if (count === 0) {
      return
    }
    me.querySelector('.style1').classList.add('hide')
    // 抽奖动画
    setTimeout(() => {
      // 从非中奖项中取最后一个，并从数组中移除该项
      const item = isArr.pop()
      const style2 = me.querySelector('.style2')
      style2.innerHTML = item.name
      style2.classList.add('show')
    }, 400)
    count--
    countEL.innerHTML = count
    // 当抽奖次数为0的时候，就把剩余的奖项全部展示出来
    if (count === 0) {
      setTimeout(() => {
        box.querySelectorAll('.style1').forEach(v => {
          v.classList.add('hide')
          if (v.nextElementSibling.className.indexOf('show') === -1) {
            const item = noArr.pop()
            v.nextElementSibling.innerHTML = item.name
          }
        })
        setTimeout(() => {
          box.querySelectorAll('.style2').forEach(v => {
            if (v.className.indexOf('show') === -1) {
              v.classList.add('show-result')
            }
          })
        }, 400)
      }, 1000)
    }
  }
</script>

</html>