快捷導(dǎo)航

vue實現(xiàn)抽獎效果Demo

更新時間：2024年01月03日 16:15:17 作者：hjy170314

這篇文章主要介紹了vue實現(xiàn)抽獎效果Demo,具有很好的參考價值,希望對大家有所幫助,如有錯誤或未考慮完全的地方,望不吝賜教

vue抽獎效果Demo

只做了簡單的抽獎效果，沒有給出彈框和中獎提示

<!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" rel="external nofollow" >
    <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,   //滾動下標(biāo)
        times:1,    //滾動次數(shù)（每一個方格為一次）
        cycle:50,   //循環(huán)滾動的次數(shù)
        speed:200,  //轉(zhuǎn)動速度
 
    },
    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);  //清除延遲函數(shù)
                this.times = 0;
            }else{
                if(this.times < this.cycle+20){
                    this.speed -=10;    //加快轉(zhuǎn)動速度
                }else if(this.times >= this.cycle){
                    this.speed += 20;
                    var ind = parseInt(Math.random()*8,0) || 0;    // 隨機(jī)產(chǎn)生一個中獎號碼
                    console.log(ind)
                    this.index = ind
                }
                var timer = setTimeout(this.startRoll,this.speed)
            }
          
        }
    },
    updated(){
 
    }
})
</script>

效果圖：

下面的代碼是我平時做項目的時候?qū)懙拇a，數(shù)據(jù)是從后臺獲取的，由于id的特殊性，所以中獎位置我做了一些調(diào)整

data:{
                times: 1 ,  //轉(zhuǎn)動次數(shù)
                indexs: -1 ,  //滾動下標(biāo)
                cycle:50,    //基本轉(zhuǎn)動次數(shù)
                speed:200,      //轉(zhuǎn)動速度
}

下面是methods中的方法

startRoll:function(){  //開始滾動
                    var that = this,
                        _this = this;
                    if (_this.on_load == 1) return;
                    that.Roll();
                    that.times += 1;  // 轉(zhuǎn)動次數(shù)
                    if(that.times > that.cycle + 10){
                        clearTimeout(this.timer);      //清除定時器
                        that.times = 0 ;
                    }else{
                        if(that.times < this.cycle){
                            this.speed -=10;   //加快轉(zhuǎn)動速度
                        }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;
                                }
                            });
 
                            /**
                             * 重置參數(shù)
                             */
                            _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(){   //滾動函數(shù)
                    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();
                        }
                    }
                }
                
            }