基于vue+html5实现九宫格抽奖转盘原理及源码

先说下动态跑马灯九宫格抽奖转盘应用场景，基于很多活动页面都常用，积分抽奖兑换等。九宫格html+css排版样式这里就不多说了。

实现原理：

跑马灯：用2个Png背景图片做css3帧切换动画。
中奖数组设置：写一个二维数据，设置8个对象。

list:[{img:'img/j1.png',title:'谢谢参与'},{img:'img/j2.png',title:'美女一个'},{img:'img/j1.png',title:'宝马一辆'},{img:'img/j2.png',title:'单车一辆'},{img:'img/j1.png',title:'鸡蛋一蓝'},{img:'img/j2.png',title:'500红包'},{img:'img/j1.png',title:'靓号一个'},{img:'img/j2.png',title:'鲜花一蓝'}],   //奖品1-9

九宫转转动：写一个转动切换函数，每次变化一个位置，做出切换背景红色，定时500ms轮询。
配置参数：把九宫转转动切换函数里一些定时等参数，中奖位置等做成配置参数。
中奖弹层：写个抽奖结果弹层提示。

HTML

<!doctype html>
<html>
<head><meta charset="utf-8"><meta name="viewport" content="width=device-width,initial-scale=1.0,minimum-scale=1.0,maximum-scale=1.0,user-scalable=no"><title>VUE实现九宫格抽奖</title><link rel="stylesheet" href="css/lottery.css"><script src="js/vue.min.js"></script><!-- VUE九宫格抽奖演示：https://www.uihtm.com/jquery/10649.html-->>
</head>
<body><div class="lottery-box" id="app"><h1 class="title">VUE九宫格抽奖</h1><div class="lottery"><div class="lottery-item"><div class="lottery-start"><div class="box gray" v-if="isStart===0"><p>活动未开始</p></div><div class="box" @click="startLottery" v-if="isStart===1"><p><b>抽奖</b></p><p>消耗{{score}}积分</p></div><div class="box gray" v-if="isStart===2"><p>活动已过期</p></div></div><ul><li v-for="(item,i) in list" :class="i==index?'on':''"><div class="box"><p><img :src="item.img" alt></p><p>{{item.title}}</p></div></li></ul></div></div><!-- 中奖弹窗 --><div class="mask" v-if="showToast"></div><div class="lottery-alert" v-if="showToast"><h1>恭喜您</h1><p><img src="data:images/j2.png" alt></p><h2>获得{{list[index].title}}</h2><div class="btnsave" @click="showToast=false">确定</div></div></div><script src="js/lottery.js"></script>
</body>
</html>

JS实现：

new Vue({el:"#app",data:{isStart:1,    score:10, //消耗积分list:[{img:'img/j1.png',title:'谢谢参与'},{img:'img/j2.png',title:'美女一个'},{img:'img/j1.png',title:'宝马一辆'},{img:'img/j2.png',title:'单车一辆'},{img:'img/j1.png',title:'鸡蛋一蓝'},{img:'img/j2.png',title:'500红包'},{img:'img/j1.png',title:'靓号一个'},{img:'img/j2.png',title:'鲜花一蓝'}],   //奖品1-9     index: -1,  // 当前转动到哪个位置，起点位置count: 8,  // 总共有多少个位置timer: 0,  // 每次转动定时器speed: 200,  // 初始转动速度times: 0,    // 转动次数cycle: 50,   // 转动基本次数：即至少需要转动多少次再进入抽奖环节prize: -1,   // 中奖位置click: true,showToast: false, //显示中奖弹窗        },mounted(){},methods:{startLottery(){if (!this.click) { return }this.startRoll(); },      // 开始转动startRoll () {this.times += 1 // 转动次数this.oneRoll() // 转动过程调用的每一次转动方法，这里是第一次调用初始化 // 如果当前转动次数达到要求 && 目前转到的位置是中奖位置if (this.times > this.cycle + 10 && this.prize === this.index) {} else {}},// 每一次转动oneRoll () {let index = this.index // 当前转动到哪个位置const count = this.count // 总共有多少个位置index += 1if (index > count - 1) { index = 0 }this.index = index},}  })

基于vue+html5实现九宫格抽奖转盘原理及源码相关推荐

java计算机毕业设计ssm基于Vue的二手商品交易网站z40n1（附源码、数据库）
java计算机毕业设计ssm基于Vue的二手商品交易网站z40n1(附源码.数据库) 项目运行环境配置: Jdk1.8 + Tomcat8.5 + Mysql + HBuilderX(Webstor ...
JAVA计算机毕业设计基于vue技术的汽车维修检测系统设计与实现源码+数据库+系统+lw文档
JAVA计算机毕业设计基于vue技术的汽车维修检测系统设计与实现源码+数据库+系统+lw文档 JAVA计算机毕业设计基于vue技术的汽车维修检测系统设计与实现源码+数据库+系统+lw文档本源码技术栈 ...
基于java基于vue的百乐儿童玩具公司管理系统计算机毕业设计源码+系统+lw文档+mysql数据库+调试部署
基于java基于vue的百乐儿童玩具公司管理系统计算机毕业设计源码+系统+lw文档+mysql数据库+调试部署基于java基于vue的百乐儿童玩具公司管理系统计算机毕业设计源码+系统+lw文档+my ...
PCL：超详细的基于法向量和曲率的区域生长算法原理以及源码解读
---------原理介绍: (1)首先计算出来各点的曲率值,将曲率值按照从小到大的顺序进行排序. (2)设置一空的种子点序列和一个空的聚类数组. (3)选取曲率最小的点放入上述种子点序列中. (4) ...
基于vue和vuex的todos效果展示及源码分享
todos,待做项目经常被以各种方式来实现,js,node, 这里分享一个基于vue和vuex的todos 主要有三部分代码main.js,index.js,App.vue import Vue fr ...
基于vue+echarts 数据可视化大屏展示[附源码]
获取 ECharts 的路径有以下几种,请根据您的情况进行选择: 1) 最直接的方法是在 ECharts 的官方网站中挑选适合您的版本进行下载,不同的打包下载应用于不同的开发者功能与体积的需求,或者您 ...
[036]基于Vue+Nodejs的网上作业批改系统(含源码、数据库、万字课设报告)
文章目录一.项目介绍二.源码获取一.项目介绍网络作业提交与批改系统:超强的作业批改项目,技术栈是Vue+Node+Mysql,最重要的是有超详细的万字报告,一劳永逸,可冲~ 主要功能介绍: 1 ...
【vue uniapp 小程序抽奖转盘老虎机和九宫格】
vue uniapp 小程序抽奖转盘老虎机和九宫格 1.npm 下载插件 # npm 安装 npm install @lucky-canvas/vue@latest# 或者 yarn 安装 yarn ...
九宫格抽奖转盘源码分析
效果如上图所示,下面对其实现代码进行分析,看能不能破解其抽奖规则.需要引入jquery-1.8.3.min.js和images/9张图片. <!DOCTYPE html PUBLIC ...

基于vue+html5实现九宫格抽奖转盘原理及源码

基于vue+html5实现九宫格抽奖转盘原理及源码相关推荐

最新文章

热门文章