幸运大转盘抽奖（前端uniapp）

幸运大转盘抽奖（前端js）

在一个商城项目中用到了大转盘抽奖，来此记录一下，样式和图片自己微调一下就好了！！！

<template><view class="collection"><luckydraw class="luckydraw" @finish="drawFinished"></luckydraw></view>
</template>
<script>import luckydraw from '@/components/luckydraw/index.vue';export default {components: {luckydraw: luckydraw},data() {return {}},onShow() {},methods: {//接收转盘结束事件drawFinished(){},}}
</script><style lang="scss" scoped></style>

下面是组件代码

<template><view class="lucky-draw" :style="scale"><image class="lucky-draw__bg" src="./images/background.png" mode="widthFix" style="width: 750rpx;"></image><view class="lucky-draw__objects" :style="rotateStyle"><image src="./images/objects-bg.png" class="lucky-draw__objects__bg"></image><view class="lucky-draw__objects__object" v-for="(item, index) in dataA" :key="index" :style="{transform: `translate(-50%) rotate(${(360 / 8) * index}deg)`,}"><view class="lucky-draw__objects__object__title">{{ item.name }}</view><image class="lucky-draw__objects__object__icon" :src="item.reward_image"></image></view></view><image class="lucky-draw__start" src="./images/start.png" @click="starta()"></image></view>
</template><script>export default {name: "lucky-draw",data() {return {dataA: [{amount: "0",id: 1,name: "99999现金奖励",probability: 10,reward_image: "/static/images/ces.png",type: "1"},{amount: "200",id: 2,name: "手表",probability: 20,reward_image: "/static/images/ces.png",type: "2"},{amount: "0",id: 3,name: "iPhone13",probability: 1,reward_image: "/static/images/ces.png",type: "1"},{amount: "0",id: 4,name: "华为P50",probability: 80,reward_image: "/static/images/ces.png",type: "2"},{amount: "0",id: 5,name: "apple",probability: 0,reward_image: "/static/images/ces.png",type: "1"},{amount: "8000",id: 6,name: "电脑",probability: 1,reward_image: "/static/images/ces.png",type: "1"},{amount: "0",id: 7,name: "水",probability: 0,reward_image: "/static/images/ces.png",type: "1"},{amount: "0",id: 8,name: "500积分",probability: 0,reward_image: "/static/images/ces.png",type: "1"}],isStart: true,//为了不连续点击rotateAngle: 0, // 旋转角度cycle: 1, // 第几次抽奖};},computed: {rotateStyle() {return `-webkit-transition: transform ${this.duration}ms ${this.mode};transition: transform ${this.duration}ms ${this.mode};-webkit-transform: rotate(${this.rotateAngle}deg);transform: rotate(${this.rotateAngle}deg);`;},scale() {return `transform: scale(${this.size / 686})`;},},props: {duration: {// 总旋转时间 ms级type: Number,default: 5000,},circle: {// 旋转圈数type: Number,default: 5,},mode: {// 由快到慢 惯性效果都省了type: String,default: "cubic-bezier(0.2, 0, 0, 1)",},size: {type: Number,default: 686,},config: {type: Object,default: () => ({}),},type: {type: Number,default: 0,},},created() {},methods: {starta() {if(this.isStart){var ida = Math.ceil(Math.random()*10);//这里我是写的一个随机数。//当后台返回我所获得的奖项id，根据id和数组里的比较，相等则旋转到奖品角度this.isStart = false;this.rotateAngle =this.circle * 360 * this.cycle -(360 / 8 +(this.dataA.findIndex((item) => item.id == ida) -1) *(360 / 8));this.cycle++;setTimeout(() => {this.dataA.forEach((item)=>{if(item.id == ida ){uni.showToast({title: '恭喜您获得' + item.name,icon: "none"})this.isStart = true;this.$emit("finish");//向父组件发送结束事件}})}, 6000)}},},};
</script>
<style scoped lang="scss">.lucky-draw {position: relative;width: fit-content;&__bg {width: 686rpx;display: block;}&__lights {position: absolute !important;width: 676rpx;left: 6rpx;top: 10rpx;display: block;animation: infinite 1s alternate lights steps(1, end);}&__objects {position: absolute;top: 49rpx;left: 135rpx;right: 63rpx;bottom: 78rpx;width: 500rpx;height: 500rpx;&__bg {position: absolute;width: 500rpx;height: 500rpx;}&__object {position: absolute;left: 50%;transform: translateX(-50%);top: 0;transform-origin: 50% 250rpx;&__title {margin-top: 62rpx;color: #4E0691;font-size: 20rpx;-webkit-transform: scale(0.7);}&__icon {width: 52rpx;height: 52rpx;display: block;margin: 18rpx auto 0;}}}&__start {width: 150rpx;height: 170rpx;display: block;position: absolute;left: 300rpx;top: 202rpx;}}@keyframes lights {0% {transform: rotate(0deg);}50% {transform: rotate(15deg);}100% {transform: rotate(0deg);}}
</style>

看图片命名换成自己的就好

幸运大转盘抽奖（前端uniapp）相关推荐

Jquery写的幸运大转盘抽奖实例,用asp.net处理的服务器逻辑，附源码下载
[实例简介] 该幸运大转盘抽奖实例已实现服务器端的业务逻辑代码,稍加改动就可以应用实际了文件:590m.com/f/25127180-488779229-66bbf7(访问密码:551685) [实 ...
PHP+AJAX开发幸运大转盘抽奖
PHP+AJAX开发幸运大转盘抽奖 PHP+AJAX开发幸运大转盘抽奖,通过奖品库存.中奖次数来计算中奖概率奖品设置 1 $prizes = array( 2 0 => array( 3 &q ...
js框架jquery实现的幸运大转盘抽奖程序代码,兼容多种浏览器(Internet Explorer 6.0+ 、Firefox 2.0 、Safari 3 、Opera 9 、Chrome)
博客目录 js框架jquery实现的幸运大转盘抽奖程序代码实现功能截图系统功能使用技术代码写在最后 js框架jquery实现的幸运大转盘抽奖程序代码本系统实现了一个幸运转盘抽奖,兼容多种浏 ...
cocos2dx 圆盘抽奖_cocos2d编写的类似幸运大转盘抽奖源码
压缩包内容概览: cocos2d编写的类似幸运大转盘抽奖源码-帮你选择 ; 随机 ; 程序委托 ; 背高清 ; 背 ipad ; 返回 ; 默认 ; 默认@2x ; 图标-72 ; 图标@2x ; 我 ...
C#保留2位小数几种场景总结游标遍历所有数据库循环执行修改数据库的sql命令原生js轮盘抽奖实例分析（幸运大转盘抽奖） javascript中的typeof和类型判断...
C#保留2位小数几种场景总结场景1: C#保留2位小数,.ToString("f2")确实可以,但是如果这个数字本来就小数点后面三位比如1.253,那么转化之后就会变成1.25. ...
js框架jquery实现幸运大转盘抽奖程序代码,兼容多种浏览器
原文:js框架jquery实现幸运大转盘抽奖程序代码,兼容多种浏览器源代码下载地址:http://www.zuidaima.com/share/1779633798073344.htm 看到网页上有 ...
幸运大转盘抽奖（前端）
采用Lottery.js插件, 无依赖, 简单易用(复制粘贴就能用) 效果图(可自己写算法定义概率,可自己定义奖项数量和名称) html <!DOCTYPE html> <html ...
php仿京东幸运大转盘抽奖,原生js vue 抽奖插件仿京东大转盘抽京豆（原创）...
插件描述:一个基于原生 javript vue2 vue3 的大转盘抽奖插件更新时间:2020-11-24 00:18:54 在 vue2.x / vue3.x 中使用方式 1:通过 import ...
前端Vue简单编写一个幸运大转盘抽奖游戏
最近公司有一个需求要做一个抽奖类的大转盘游戏配合运营推广,先看看大概的界面ui图吧使用rotate计算每一个奖项的角度进行奖项的布局 <ul class="gift-containe ...
js之原生js轮盘抽奖实例分析（幸运大转盘抽奖）
效果图: 所需图片素材: 这张图是pointer.png的位置的. turntable-bg.jpg这张是转盘背景图,在背景位置. 这张是turntable.png位置的. 需要这三张图片,如果要实现 ...

幸运大转盘抽奖（前端uniapp）

幸运大转盘抽奖（前端js）

幸运大转盘抽奖（前端uniapp）相关推荐

最新文章

热门文章