vue实现抽奖效果Demo
作者：hjy170314
这篇文章主要介绍了vue实现抽奖效果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, //滚动下标
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();
}
}
}
}总结
以上为个人经验，希望能给大家一个参考，也希望大家多多支持脚本之家。