js实现九宫格翻牌抽奖（怎么也抽不中大奖系列）

una_mattina7

已于 2023-03-21 12:28:16 修改

阅读量1.2k

点赞数 3

分类专栏： JavaScript 文章标签： javascript css3

于 2022-12-22 11:42:37 首次发布

本文链接：https://blog.csdn.net/qq_42691298/article/details/128406265

版权

JavaScript 专栏收录该内容

15 篇文章

订阅专栏

先来看一下效果：

实现原理：

将小奖品（即官方让你中奖的奖品）中添加一个中奖项状态，定义为true，以此即可产生中奖项与非中奖项两个数组；每次翻牌抽奖时就会从非中奖项中取最后一个，并从数组中移除该项；当抽奖次数为0的时候，就把剩余的奖项全部展示出来；css定义翻牌前后两种风格，transform: scaleX(num)中num为1或0控制元素的显示与隐藏

实现代码：

<!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>九宫格翻牌抽奖</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(() => 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>