跑马灯抽奖、九方格抽奖、跑马灯九方格抽奖

Red 1027

已于 2024-01-11 10:10:30 修改

阅读量343

点赞数 9

文章标签：前端 javascript css vue js html5 css3

于 2024-01-10 18:30:15 首次发布

本文链接：https://blog.csdn.net/red1027/article/details/129184361

版权

本文介绍了一个使用Vue.js编写的抽奖活动跑马灯示例，通过JavaScript实现动态轮播效果，用户点击后进行随机抽奖，达到一定次数后中奖并显示奖品。

摘要由CSDN通过智能技术生成

抽奖活动跑马灯

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

<head>
    <meta charset="UTF-8">
    <title>跑马灯抽奖</title>
    <style>
        .grid-item {
            width: 200px;
            height: 200px;
            background-color: antiquewhite;
            margin-top: 10px;
            position: relative;
        }

        .grid-bg {
            width: 100%;
            height: 100%;
            position: absolute;
            left: 0;
            top: 0;
            background-position: center;
            background-size: contain;
            background-repeat: no-repeat;
            text-align: center;
            line-height: 200px;
        }

        .grid-container {
            width: 700px;
            height: 700px;
            display: flex;
            justify-content: space-between;
            flex-wrap: wrap;
        }
    </style>
</head>

<body>
    <div id="app">
        <div class="grid-container">
            <div :class="`grid-item grid-item${index}`" v-for="(item, index) in grids.name" :key="index"
                @click="spinGrid(index)">
                <div class="grid-bg">{{ item }}</div>
            </div>
        </div>
    </div>
</body>
<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
<script>


    var vm = new Vue({
        el: "#app",
        data: {
            deepInterval: null,
            grids: {
                name: ['神器', '金色传说', '皇冠', '神技', '点击抽奖', '传说', '秘籍', '金币', '史诗'],
                cycle: [0, 1, 2, 5, 8, 7, 6, 3], // 跑马灯排序
                default_my_prize: 4, // 奖品坐标，按照跑马灯坐标
                index: 0,
                count: 0,
            }
        },
        methods: {
            spinGrid(index) {
                this.grids.count = 0; // 最少跑马灯效果归0
                if (index !== 4) { return }
                let my_prize = document.getElementsByClassName('grid-bg');
                this.deepInterval = setInterval(() => {
                    for (let i = 0; i < my_prize.length; i++) {
                        my_prize[i].style.backgroundColor = "";
                    }
                    this.grids.index >= this.grids.cycle.length && (this.grids.index = 0); // 超出时坐标归0

                    my_prize[this.grids.cycle[this.grids.index]].style.backgroundColor = "violet";

                    this.grids.index++; // 坐标+1
                    this.grids.count++; // 记录跑了多少，这里大于20时展示
                    if (this.grids.count > 20 && (this.grids.index - 1) === this.grids.default_my_prize) {
                        clearInterval(this.deepInterval); //清除
                        //中奖提示
                        setTimeout(() => { alert('恭喜你抽中了[' + my_prize[this.grids.cycle[this.grids.index - 1]].innerHTML + ']') }, 100);
                        this.deepInterval = null;
                    }
                    console.log("log");
                }, 70)
            },
        }
    })
</script>

</html>