vue实现抽奖效果Demo
更新时间：2024年01月03日 16:15:17 作者：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();
}
}
}
}总结
以上为个人经验，希望能给大家一个参考，也希望大家多多支持脚本之家。
相关文章
Vue响应式原理Observer、Dep、Watcher理解
这篇文章主要介绍了Vue响应式原理-理解Observer、Dep、Watcher,文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值，需要的朋友们下面随着小编来一起学习学习吧2019-06-06
vue3使用vuedraggable和grid实现自定义拖拽布局方式
这篇文章主要介绍了vue3使用vuedraggable和grid实现自定义拖拽布局方式,具有很好的参考价值,希望对大家有所帮助,如有错误或未考虑完全的地方,望不吝赐教2024-06-06
本篇文章主要介绍了Vue中添加过渡效果的方法，Vue 在插入、更新或者移除 DOM 时，提供多种不同方式的应用过渡效果，有兴趣的同学可以了解一下。2017-03-03
Vue路由钩子之afterEach beforeEach的区别详解
这篇文章主要介绍了Vue路由钩子 afterEach beforeEach区别 ,vue-router作为vue里面最基础的服务,学习一段时间,对遇到的需求进行一些总结。需要的朋友可以参考下2018-07-07
Vue移动端用淘宝弹性布局lib-flexible插件做适配的方法
这篇文章主要介绍了Vue移动端用淘宝弹性布局lib-flexible插件做适配的操作方法，本文通过实例代码给大家介绍的非常详细，对大家的学习或工作具有一定的参考借鉴价值,需要的朋友可以参考下2020-05-05![vue模块导入报错问题Module not found: Error:[CaseSensitivePathsPlugin]](//img.jbzj.com/images/xgimg/bcimg5.png)
vue模块导入报错问题Module not found: Error:[CaseSensi
这篇文章主要介绍了vue模块导入报错问题Module not found: Error:[CaseSensitivePathsPlugin]，具有很好的参考价值，希望对大家有所帮助。如有错误或未考虑完全的地方，望不吝赐教2023-06-06
本文主要介绍了vue3中使用jsx的实现步骤，文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值，需要的朋友们下面随着小编来一起学习学习吧2023-07-07
vue音乐播放器插件vue-aplayer的配置及其使用实例详解
本篇文章主要介绍了vue音乐播放器插件vue-aplayer的配置及其使用实例详解，具有一定的参考价值，有兴趣的可以了解一下2017-07-07
这篇文章主要介绍了vue项目优化首评加载速度，以及白屏时间过久的问题，文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值，需要的朋友们下面随着小编来一起学习学习吧2022-09-09
这篇文章主要为大家介绍了Vue之MVVM,模板语法和数据绑定，具有一定的参考价值，感兴趣的小伙伴们可以参考一下，希望能够给你带来帮助2021-12-12
![vue模块导入报错问题Module not found: Error:[CaseSensitivePathsPlugin]](http://img.jbzj.com/images/xgimg/bcimg5.png)
最新评论