九宫格抽奖demo

最新推荐文章于 2020-12-01 18:43:38 发布

hy3528

最新推荐文章于 2020-12-01 18:43:38 发布

阅读量160

点赞数

分类专栏： html H5

本文链接：https://blog.csdn.net/hy3528/article/details/107410654

版权

html 同时被 2 个专栏收录

73 篇文章 1 订阅

订阅专栏

16 篇文章 0 订阅

订阅专栏

demo

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

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta name="viewport"
        content="width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1,user-scalable=no" />
    <title>标题</title>
    <link rel="stylesheet" href="https://cdn.suoluomei.com/common/js2.0/npm/vant@2.2/lib/index.css">
    <style>
        [v-cloak] {
            display: none !important;
        }

        * {
            margin: 0;
            padding: 0;
        }

        html {
            font-size: 16px;
            background: #ffffff;
        }

        .head,
        .footer {
            width: 100%;
            height: 100%;
            display: flex;
            position: relative;
        }

        img {
            width: 100%;
            height: 100%;
        }

        .win_text {
            background: red;
            padding: .3125rem .625rem .3125rem 1rem;
            box-sizing: border-box;
            position: fixed;
            top: 6%;
            right: 0;
            z-index: 2;
            font-size: .75rem;
            color: #ffffff;
            border-top-left-radius: 1.5625rem;
            border-bottom-left-radius: 1.5625rem;
        }

        .main {
            width: 78%;
            height: 42.5%;
            position: absolute;
            bottom: 15.5%;
            left: 11.1%;
        }

        ul {
            width: 100%;
            height: 100%;
            position: relative;
        }

        li {
            position: absolute;
            width: 32%;
            height: 32%;
            list-style: none;
        }

        .img1 {
            width: 100%;
            height: 100%;
            display: flex;
        }

        .img1 img {
            width: 100%;
            height: auto;
        }

        .item1 {
            left: 0;
            top: 0;
        }

        .item2 {
            left: 34%;
            top: 0;
        }

        .item3 {
            left: 68%;
            top: 0;
        }

        .item4 {
            left: 68%;
            top: 34%;
        }

        .item5 {
            left: 68%;
            top: 68%;
        }

        .item6 {
            left: 34%;
            top: 68%;
        }

        .item7 {
            left: 0;
            top: 68%;
        }

        .item8 {
            left: 0;
            top: 34%;
        }

        .item9 {
            left: 34%;
            top: 34%;
        }

        .active {
            position: relative;
        }

        .active::before {
            content: '';
            width: calc(100% - 4px);
            height: calc(100% - 4px);
            position: absolute;
            left: 0;
            top: 0;
            z-index: 2;
            border: 3px solid #fbcb0a;
            border-radius: 10px;
        }

        .van-overlay {
            z-index: 3 !important;
        }

        .wrapper {
            width: 100%;
            height: 100%;
            position: relative;
            display: flex;
            align-items: center;
            justify-content: center;
        }

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

        .wrapper_close {
            width: 2.5rem;
            height: 2.5rem;
            margin: 1rem auto 0;
        }

        .win_show_main {
            width: 80%;
            height: 60%;
        }

        .win_show_con {
            width: 100%;
            height: calc(100% - 2.5rem);
            background: #ffffff;
            border-radius: .625rem;
            overflow-y: scroll;
            padding: 0 .9375rem;
            box-sizing: border-box;
            font-size: .875rem;
        }

        .win_show_list {
            display: flex;
            justify-content: space-between;
            margin: .9375rem 0;
        }
    </style>
</head>

<body>
    <div id="app" class="box">
        <!-- 中奖记录 -->
        <div class="win_text" @click="win_close(1)">中奖记录</div>

        <div class="head">
            <img src="http://sucai.suoluomei.cn/sucai_zs/images/20200724145740-bg_top.png" alt="">
            <div class="main">
                <ul>
                    <li v-for="(item,i) in list" :key="i" :class="['item' + (i+1), {'active': index == i}]">
                        <div class="img1">
                            <img :src="item.image" alt="">
                        </div>
                    </li>
                    <!-- 抽奖按钮 -->
                    <li class="item9" @click="saveUser">
                        <div class="img1">
                            <img src="http://sucai.suoluomei.cn/sucai_zs/images/20200724151105-00.png" alt="">
                        </div>
                    </li>
                </ul>
            </div>
        </div>
        <div class="footer">
            <img src="http://sucai.suoluomei.cn/sucai_zs/images/20200724155947-bg_footer.png" alt="">
        </div>

        <!-- 弹窗 -->
        <van-overlay :show="show">
            <div class="wrapper" @click.stop>
                <div class="wrapper_main">
                    <div class="wrapper_img">
                        <img :src="pop_img" alt="">
                    </div>
                    <div class="wrapper_close" @click="wrapper_close">
                        <img src="http://sucai.suoluomei.cn/sucai_zs/images/20200724162000-close.png" alt="">
                    </div>
                </div>
            </div>
        </van-overlay>

        <!-- 中奖记录弹窗 -->
        <van-overlay :show="win_show">
            <div class="wrapper" @click.stop>
                <div class="win_show_main">
                    <div class="win_show_con">
                        <div class="win_show_list" v-for="(item,i) in prizeList" :key="i">
                            <div>{{item.prize_name}}</div>
                            <div>{{item.gettime}}</div>
                        </div>
                    </div>
                    <div class="wrapper_close" @click="win_close(2)">
                        <img src="http://sucai.suoluomei.cn/sucai_zs/images/20200724162000-close.png" alt="">
                    </div>
                </div>
            </div>
        </van-overlay>

    </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/vant@2.2/lib/vant.min.js"></script>
<script>
    //获取当前URL
    var local_url = document.location.href;
    //截取get字符串
    var getstr = local_url.substr(local_url.indexOf('?') + 1)
    //解析成get数组
    var get = getstr.split('/')
    console.log('get', get)

    var vue = new Vue({
        el: '#app',
        data: {
            list: [],
            index: 0, // 当前转动到哪个位置，第一次起点位置0,对应页面item1位置
            count: 8, // 总共有多少个位置
            times: 0, // 转动跑格子次数,
            cycle: 30, // 转动基本次数：即至少需要转动多少次再进入抽奖环节
            speed: 100, // 初始转动速度
            timer: 0, // 转动定时器
            prize: 0, // 中奖位置，接口返回
            show: false, //中奖弹窗
            pop_img: '', //中奖弹窗图片
            forbidden: false,
            win_show: false, //中奖记录弹窗
            prizeList: [], //中奖记录列表
        },
        created() {
            let that = this
        },
        mounted() {
            let that = this
            that.getList()
        },
        methods: {
            // 请求公共方法
            ajax(url, params, cb) {
                $.ajax({
                    type: "POST",
                    url: url,
                    data: params,
                    dataType: "json",
                    success: function (response) {
                        cb(response)
                    }
                });
            },
            // 查询奖品列表
            getList() {
                let that = this
                that.ajax('__MODULE__/Activity/getPrizeList', { channel: 1 }, function (res) {
                    if (res.errcode != 0) {
                        that.$toast(res.msg)
                        return false
                    }
                    that.list = res.data.rows
                })
            },
            // 保存用户中奖
            saveUser() {
                let that = this
                that.ajax('__MODULE__/Activity/saveUserPrizeList', { id: get[5], sale: get[7] }, function (res) {
                    console.log('saveUserPrizeList', res)
                    if (res.errcode != 0) {
                        that.$toast(res.msg)
                        if (res.data.register == 0) {
                            // 跳转注册页面
                            setTimeout(function () {
                                that.link('__MODULE__/Register/index')
                            }, 1000)
                            return false
                        }
                        return false
                    }
                    that.move()
                })
            },
            // 获取中奖记录列表
            getUserWinningPrize(){
                let that = this
                that.ajax('__MODULE__/Activity/getUserWinningPrize', { }, function (res) {
                    console.log('getUserWinningPrize', res)
                    if (res.errcode != 0) {
                        that.$toast(res.msg)
                        return false
                    }
                    that.prizeList = res.data.rows
                })
            },
            //点击开始抽奖
            move() {
                if (this.forbidden) {
                    return false
                }
                this.forbidden = true
                this.speed = 100
                this.prize = get[5] - 1;//中奖位置赋值，跑马灯最终停留位置，这里实际位置需要-1
                this.startRoll();//执行抽奖
            },
            // 开始转动
            startRoll() {
                this.times += 1; // 转动次数
                this.oneRoll(); // 转动过程调用的每一次转动方法，这里是第一次调用初始化
                this.usePrize();
            },
            // 每一次转动
            oneRoll() {
                let index = this.index; // 当前转动到哪个位置
                const count = 8; // 总共有多少个位置
                index += 1;
                if (index > count - 1) {
                    index = 0;
                }
                this.index = index;
            },
            // 转动停止
            usePrize() {
                // 如果当前转动次数达到要求 && 目前转到的位置是中奖位置
                if (this.times > this.cycle + 10 && this.prize === this.index) {
                    clearTimeout(this.timer); // 清除转动定时器
                    this.times = 0; // 转动跑格子次数初始化为0，可以开始下次抽奖
                    this.show = true
                    this.pop_img = this.list[this.prize].pop_img
                    this.forbidden = false
                } else {
                    if (this.times < this.cycle - 20) {
                        this.speed -= 4; // 加快转动速度
                    } else {
                        this.speed += 10; // 抽奖即将结束，放慢转动速度
                    }
                    this.timer = setTimeout(this.startRoll, this.speed);//开始转动
                }
            },
            // 中奖弹窗
            wrapper_close() {
                this.show = !this.show
            },
            // 中奖记录弹窗
            win_close(type) {
                this.win_show = !this.win_show
                if (type == 1) {
                    this.getUserWinningPrize()
                }
            },
            // 跳转
            link(url) {
                let that = this
                window.location.href = url
            },
        }
    })
</script>

</html>

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

<head>
    <meta charset="UTF-8">
    <link rel="stylesheet" href="https://cdn.suoluomei.com/common/js2.0/npm/vant@2.2/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/vant@2.2/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>

demo2.0

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

<head>
    <meta charset="UTF-8">
    <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;
        }

        .box {
            position: relative;
            width: 400px;
            height: 400px;
            margin: auto;
        }

        .draw {
            position: absolute;
            top: 50%;
            left: 50%;
            transform: translate(-50%, -50%);
            width: 100px;
            height: 100px;
            background: chocolate;
            text-align: center;
            line-height: 100px;
            color: #fff;
            cursor: pointer;
        }

        .row {
            position: absolute;
            width: 100px;
            height: 100px;
            line-height: 100px;
            background: cadetblue;
            color: #fff;
            text-align: center;
        }

        .box .row:nth-child(1) {
            top: 0;
            left: 0;
        }

        .box .row:nth-child(2) {
            top: 0;
            left: 50%;
            transform: translate(-50%, 0);
        }

        .box .row:nth-child(3) {
            top: 0;
            right: 0;
        }

        .box .row:nth-child(4) {
            top: 50%;
            right: 0;
            transform: translate(0, -50%);
        }

        .box .row:nth-child(5) {
            bottom: 0;
            right: 0;
        }

        .box .row:nth-child(6) {
            bottom: 0;
            right: 50%;
            transform: translate(50%, 0);
        }

        .box .row:nth-child(7) {
            bottom: 0;
            left: 0;
        }

        .box .row:nth-child(8) {
            top: 50%;
            left: 0;
            transform: translate(0, -50%);
        }

        .active {
            background: lightseagreen !important;
        }
    </style>
</head>

<body>
    <div id="Vue">
        <div class="box">
            <div class="row" :class="select == index ? 'active' : ''" v-for="(item,index) in list" :key="index">
                {{item.name}}</div>
            <div class="draw" @click="startDraw()">抽奖</div>
        </div>
    </div>
</body>
<script src="https://cdn.suoluomei.com/common/js2.0/vue/v2.5.16/vue.js"></script>
<script>
    new Vue({
        el: "#Vue",
        data: {
            list: [
                {
                    name: "手机"
                },
                {
                    name: "平板"
                },
                {
                    name: "电磁炉"
                },
                {
                    name: "洗衣机"
                },
                {
                    name: "衣柜"
                },
                {
                    name: "电脑"
                },
                {
                    name: "电视"
                },
                {
                    name: "冰箱"
                },
            ],
            flag: true,//是否开始抽奖
            select: 0,//页面对应抽奖下标
            timer: "",
            count: 0
        },
        methods: {
            startDraw() {
                if (this.flag == true) {
                    this.flag = false
                    this.timer = setInterval(() => {
                        this.spinPrize()
                    }, 100)
                }
            },

            spinPrize() {
                var spin = 3 //旋转圈数
                var win = 5 //中奖产品 0-7
                this.select += 1
                if (this.select == 8 && this.count != spin) {
                    this.select = 0
                    this.count += 1
                }
                if (this.select == win && this.count == spin) {
                    clearInterval(this.timer)
                    this.flag = true
                    this.count = 0
                    console.log("中奖产品为:" + this.list[this.select].name)
                }
            },
        }
    })
</script>

</html>

hy3528

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
九宫格抽奖demo

<!DOCTYPE html><html lang="en"> <head> <meta charset="UTF-8" /> <meta name="viewport" content="width=device-width, initial-scale=1.0" /> <title>js九宫格抽奖</title> <style> * { pad
复制链接

扫一扫