vue抽奖效果Demo

最新推荐文章于 2024-08-16 12:40:11 发布

hjy170314

最新推荐文章于 2024-08-16 12:40:11 发布

阅读量5.1k

点赞数 1

分类专栏：前端知识文章标签： vue 前端

本文链接：https://blog.csdn.net/hjy170314/article/details/90545282

版权

前端知识专栏收录该内容

104 篇文章 2 订阅

订阅专栏

只做了简单的抽奖效果，没有给出弹框和中奖提示

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <script src="./vue.js"></script>
    <link rel="stylesheet" href="./index.css">
    <title>九宫格抽奖案例（PC端）</title>
</head>
<body>
    <div  id="app">
        <div class="lotteryBox" >
            <div v-for='(item,key) in lotteryData' :key="item.id" :class="key === index?'active':''">
                <img :src=item.imgUrl alt="" class="itemImg">
                <p>{{item.text}}</p>
            </div>
            
        
        </div>
        <div class="lotteryBtn" @click='lotteryBtn'>
            立即抽奖
        </div>
    </div>
</body>
</html>
<script>
var vm = new Vue({
    el:"#app",
    data:{
        lotteryData:[
            {id:0,imgUrl:"./count.png",text:"10元"},
            {id:1,imgUrl:"./count.png",text:"11元"},
            {id:2,imgUrl:"./count.png",text:"10元"},
            {id:3,imgUrl:"./count.png",text:"13元"},
            {id:4,imgUrl:"./count.png",text:"111元"},
            {id:5,imgUrl:"./count.png",text:"19元"},
            {id:6,imgUrl:"./count.png",text:"310元"},
            {id:7,imgUrl:"./count.png",text:"14元"},
            {id:8,imgUrl:"./count.png",text:"1元"},
        ],
        index:-1,   //滚动下标
        times:1,    //滚动次数（每一个方格为一次）
        cycle:50,   //循环滚动的次数
        speed:200,  //转动速度

    },
    methods:{
        lotteryBtn:function(){
            console.log('点击')
            this.startRoll();
            this.index = -1;
            this.speed = 200;
            this.times = 1;
        },
        roll:function(){
            var index = this.index;
            var count = this.lotteryData.length;  //总长度
            index += 1;
            if(index > count -1){
                index = 0
            }
            this.index = index
        },
        startRoll:function(){
            this.times += 1;
            this.roll();
            if(this.times > this.cycle + 20){
                clearTimeout(timer);  //清除延迟函数
                this.times = 0;
            }else{
                if(this.times < this.cycle+20){
                    this.speed -=10;    //加快转动速度
                }else if(this.times >= this.cycle){
                    this.speed += 20;
                    var ind = parseInt(Math.random()*8,0) || 0;    // 随机产生一个中奖号码
                    console.log(ind)
                    this.index = ind
                }
                var timer = setTimeout(this.startRoll,this.speed)
            }
          
        }
    },
    updated(){

    }
})
</script>

效果图;\

下面的代码是我平时做项目的时候写的代码，数据是从后台获取的，由于id的特殊性，所以中奖位置我做了一些调整，

data:{
                times: 1 ,  //转动次数
                indexs: -1 ,  //滚动下标
                cycle:50,    //基本转动次数
                speed:200,      //转动速度
}   
下面是methods中的方法

startRoll:function(){  //开始滚动
                    var that = this,
                        _this = this;
                    if (_this.on_load == 1) return;
                    that.Roll();
                    that.times += 1;  // 转动次数
                    if(that.times > that.cycle + 10){
                        clearTimeout(this.timer);      //清除定时器
                        that.times = 0 ;
                    }else{
                        if(that.times < this.cycle){
                            this.speed -=10;   //加快转动速度
                        }else if(that.times >= that.cycle ){ 
                            this.speed += 20;
                            _this.on_load = 1;
                            $.post("{{:url('lotteryProcessHandle')}}", function (res) {
                                switch (parseInt(res.code)) {
                                    case 0:
                                        that.prizes(res.data.id);   
                                        _this.user_info.luckydraw_times;
                                        if (parseInt(res.data.reward_category) == 0) layerMsg(res.msg, 5, 3000, 5, '', function(){
                                            _this.on_load = 0;
                                        });
                                        else layerMsg(res.msg, 1, 3000, 5, '', function(){
                                            _this.on_load = 0;
                                        });
                                        break;
                                    default:
                                        layerMsg(res.msg, 5, 1500, 5, '', function(){
                                            _this.on_load = 0;
                                        });
                                        break;
                                }
                            });

                            /**
                             * 重置参数
                             */
                            _this.times = 1;
                            _this.indexs = -1;
                            _this.speed = 200;
                        }
                        if(that.speed <40) that.speed = 40;
                        this.timer = setTimeout(this.startRoll,this.speed);
                    }
                },
                Roll:function(){   //滚动函数
                    var _this = this;
                    var index = _this.indexs;
                    var count = _this.lotteryItem.length;
                    index += 1;
                    if(index > count -1) index = 0;
                    _this.indexs = index;
                },
                prizes:function(id){
                    var that = this,
                        datas = that.lotteryItem;
                    if (!isEmpty(datas)) {
                        for(var i=0; i< datas.length ;i++){
                            var ind = i;
                            if(datas[ind].id == id){
                                that.indexs = i;
                                break;
                            }
                        }
                    } 
                },
            },
            mounted(){
                // this.changeType();
            },
            updated:function(){
                this.prizes()
                var _that = this
                // 抽奖按钮点击事件
                var letts =  document.getElementsByClassName('lotterydefaultBg');
                for(var i =0 ; i<letts.length; i++){
                    var index = i
                    if(index === 4){
                        letts[i].onclick = function(){
                            if (_that.on_load == 1) return;
                            _that.startRoll();
                        }
                    }
                }
                
            }