九宫格抽奖demo-单页面vue


<html lang="en">

<head>
    <meta charset="UTF-8">
    <link rel="stylesheet" href="https://cdn.suoluomei.com/common/js2.0/npm/[email protected]/lib/index.css">
    <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no" />
    <title>标题title>
    <style>
        * {
            padding: 0;
            margin: 0;
        }

        [v-cloak] {
            display: none !important;
        }

        #prize {
            position: absolute;
            left: 50%;
            transform: translateX(-50%);
            top: 6.25rem;
            display: block;
            width: 20rem;
            height: 2.5rem;
            background-color: rgb(255, 255, 255);
            border-radius: .125rem;
            box-shadow: rgba(0, 0, 0, 0.3) 0 0 3px 2px;
            letter-spacing: .125rem;
            text-align: center;
            line-height: 2.5rem;
        }

        .calligraphy {
            width: 20.625rem;
            height: 20.625rem;
            position: relative;
            left: 50%;
            top: 50%;
            transform: translate(-50%, 50%);
        }

        .calligraphy>span {
            float: left;
            width: 6.25rem;
            height: 6.25rem;
            margin: .3125rem;
            background: rgb(22, 186, 236);
            color: white;
            text-align: center;
            line-height: 6.25rem;
        }

        .calligraphy>span:nth-of-type(4) {
            position: relative;
            left: 13.75rem;
        }

        .calligraphy>span:nth-of-type(5) {
            position: relative;
            left: 6.875rem;
            top: 6.875rem;
        }

        .calligraphy>span:nth-of-type(6) {
            position: relative;
            left: -6.875rem;
            top: 6.875rem;
        }

        .calligraphy>span:nth-of-type(8) {
            position: relative;
            left: -6.875rem;
            top: -6.875rem;
        }

        .calligraphy>span:nth-of-type(9) {
            cursor: pointer;
            background: rgb(255, 148, 61);
            position: relative;
            left: -6.875rem;
            top: -6.875rem;
        }

        .aa {
            background: rgb(78, 78, 78) !important;
        }
    style>
head>

<body>
    <div v-cloak id="Vue">
        <p v-if="prize != ''" id="prize">恭喜您抽中{{prize}}!!!p>
        <div class="calligraphy">
            <span v-for="(item,index) in list" :key="index"
                v-bind:class="[select == index && index != 8 ? 'aa' : '', '']" @click="luck(index)">{{item.name}}span>
        div>
    div>
body>
<script src="https://cdn.suoluomei.com/common/js/jquery-2.1.4.min.js">script>
<script src="https://cdn.suoluomei.com/common/js2.0/vue/v2.5.16/vue.js">script>
<script src="https://cdn.suoluomei.com/common/js2.0/npm/[email protected]/lib/vant.min.js">script>
<script>
    window.alert = function (name) {
        var iframe = document.createElement("IFRAME");
        iframe.style.display = "none";
        iframe.setAttribute("src", 'data:text/plain,');
        document.documentElement.appendChild(iframe);
        window.frames[0].window.alert(name);
        iframe.parentNode.removeChild(iframe);
    }
    new Vue({
        el: "#Vue",
        data: {
            list: [
                {
                    name: "手机"
                },
                {
                    name: "平板"
                },
                {
                    name: "电磁炉"
                },
                {
                    name: "洗衣机"
                },
                {
                    name: "衣柜"
                },
                {
                    name: "电脑"
                },
                {
                    name: "电视"
                },
                {
                    name: "冰箱"
                },
                {
                    name: "抽奖"
                },
            ],
            status: true,//是否开始抽奖
            select: 0,//页面对应抽奖下标
            times: 7, // 奖品位置 0 - 7
            time: 0,//当前的旋转次数
            speed: 100,//转盘速度
            myVar: "",
            prize: "", //奖品名称
            num: 0,
            turns:3,//圈数
        },
        created() {
            document.documentElement.style.fontSize = 16 * document.documentElement.clientWidth / 375 + 'px'
        },
        methods: {
            // 请求公共方法
            ajax(type, url, params, cb) {
                $.ajax({
                    type: type,
                    url: url,
                    data: params,
                    dataType: "json",
                    async: false,
                    success: (response) => {
                        cb(response)
                    }
                });
            },
            start(e) {
                if (e == 8) {
                    this.time = this.time + 1
                    this.select = this.select + 1
                    if (this.select == 8 && this.num != (this.turns - 1)) {
                        this.select = 0
                        this.num = this.num + 1
                        this.time = 0
                    }
                    if (this.num == (this.turns - 1)) {
                        if (this.time == this.times) {
                            clearInterval(this.myVar);
                            this.status = true
                            this.time = 0
                            this.num = 0
                            this.prize = this.list[this.select].name
                        }
                    }

                }
            },
            luck(e) {
                this.prize = ""
                if (this.status == true) {
                    this.status = false
                    this.myVar = setInterval(() => {
                        this.start(e)
                    }, this.speed)
                } else {
                    vant.Toast("抽奖中")
                }
            }
        }
    })
script>
html>

你可能感兴趣的:(html,Vue)