VUE 作业 抽奖小案例

随便写写：

 

 

 

 

<!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>
    <script src="https://cdn.jsdelivr.net/npm/vue@2/dist/vue.js"></script>
</head>

<body>
    <div id="work">
        <div class="center">
            <div
                style="text-align: center; margin: 10px; padding: 10px; background-color: rgb(191, 136, 205);color: #fff; font-size: 30px;">
                咸瑜抽奖！ 童叟无欺！ 10块钱一次！ 10块钱买不了吃亏！ 买不来上当！</div>

            <div class="centent">

                <div class="box" v-for="(item, index) in list" :key="index" :class="[id == item.id?'active':'']">
                    <div v-html="item.name"></div>
                </div>

                <div class="button" @click="start">
                    <div> 点击抽奖 </div>
                </div>

            </div>
        </div>
    </div>
</body>

<script>
    var app = new Vue({
        el: "#work",
        data() {
            return {
                list: [
                    { id: 0, name: "Iphone13 Pro" },
                    { id: 1, name: "咸瑜的<br>Ipad 2021 256G" },
                    { id: 2, name: "保时捷钥匙<br>一枚" },
                    { id: 3, name: "洗脚机<br>一部" },
                    { id: 4, name: "刘畊宏<br>同款短裤一条" },
                    { id: 5, name: "男生女生向前冲<br>同款冰箱" },
                    { id: 6, name: "小米电视机<br>一台" },
                    { id: 7, name: "惠普<br>笔记本电脑" },
                ],
                id: 0,
            }
        },
        methods: {
            start() {
                // 定义抽奖顺序
                var arr = [0, 1, 2, 4, 7, 6, 5, 3]
                let i = 0;
                let circle = 3;
                let random = 0;

                // 转个3圈再说...
                let flag = setInterval(() => {
                    // this.id = this.id == 3 ? i = 0 : arr[++i];
                    if (this.id == 3) {
                        this.id = i = 0;
                        // 计圈
                        circle--;
                    } else {
                        this.id = arr[++i]
                        // 已转3圈
                        if (circle == 0) {
                            // 取随机数 会有多个值，但取最后一个为准
                            random = Math.floor(Math.random() * 8);
                            // 会有多个值，但取最后一个为准
                            // console.log(random);
                        }
                        if (circle < 0) {
                            if (random === this.id) {
                                // 停下来
                                clearInterval(flag)
                                // 延时500ms执行，因为动画没赶上
                                setTimeout(() => {
                                    alert("恭喜您！获得" + this.list[random].name)
                                }, 500);
                            }
                        }
                    }
                }, 150);
            },
        }
    })
</script>

<style>
    #work {
        width: 100vw;
    }

    .center {
        width: 80%;
        margin: 0 auto;
    }

    .centent {
        width: 400px;
        height: 400px;
        margin: 0 auto;
        display: grid;
        grid-template-rows: 1fr 1fr 1fr;
        grid-template-columns: 1fr 1fr 1fr;
        grid-template-areas:
            "b1 b2 b3"
            "b4 bs b5"
            "b6 b7 b8";
        row-gap: 10px;
        column-gap: 10px;
    }

    .box,
    .button {
        text-align: center;
        display: flex;
        flex-direction: row;
        justify-content: center;
        align-items: center;
        background-color: rgb(60, 58, 58);
        color: #fff;
        font-weight: 700;
        border-radius: 3%;
        border: 1px solid transparent;
    }

    .active {
        border: 1px solid red;
        box-shadow: 1px 1px 18px 3px red;
        color: aqua;
        text-shadow: 3px 2px 10px aqua;
        animation: showDivAni 0.3s 0.5;
    }

    .button {
        background-color: rgb(53, 53, 53);
        color: aqua;
        text-shadow: 3px 2px 10px aqua;
        cursor: pointer;
        grid-area: bs;
    }

    @keyframes showDivAni {
        0% {
            opacity: 0.6;
        }

        100% {
            opacity: 1;
        }
    }
</style>

</html>
View Code

 

吼吼吼

posted @ 2022-05-07 14:05  咸瑜  阅读(76)  评论(0)  编辑  收藏  举报