Vue 幸运大转盘
转盘抽奖主要有两种，指针转动和转盘转动，个人觉得转盘转动比较好看点，指针转动看着头晕，转盘转动时指针是在转盘的中间位置，这里要用到css的transform属性和transition属性，这两个因为不常用最好是上网查查，用法和功能。
在html部分
<div id="wheel_surf">
<div class="wheel_surf_title">幸运大转盘</div>
<div class="lucky-wheel">
<div class="wheel-main">
<div class="wheel-pointer-box">
<div class="wheel-pointer" @click="rotate_handle()" :style="{transform:rotate_angle_pointer,transition:rotate_transition_pointer}"></div>
</div>
<div class="wheel-bg" :style="{transform:rotate_angle,transition:rotate_transition}">
<div class="prize-list">
<div class="prize-item" v-for="(item,index) in prize_list" :key="index">
<div class="prize-pic" v-if="item.icon">
<img :src="item.icon" />
</div>
<div class="prize-type">
{{item.name}}</div>
</div>
</div>
</div>
</div>
</div>
<div v-transfer-dom>
<x-dialog v-model="showHideOnBlur" class="dialog-demo wheel_dialog" hide-on-blur>
<div class="img-box">
<div v-show="val == 7" class="noactive">
<p>谢谢参与！祝您下次好运</p>
</div>
<div v-show="val !== 7">
<p>恭喜你</p>
<img :src="imgActive" />
<p>{{item.rewardDesc}}</p> // 获奖返回值
</div>
</div>
<div @click="showHideOnBlur=false">
<span class="vux-close"></span>
</div>
</x-dialog>
</div>
</div>
奖项数据
这里的第一个style部分是指针的位置，距离转动的初始值，是固定不变的，第二个style是转盘的位置transform:rotate_angle是转盘转动的角度，transition:rotate_transition是转动的时候它的转动速度，方向，等等属性。rotate_handle()是点击开始转动的事件。prize_list是转盘上面的奖品图片名字列表。
data:
prize_list: [
{
icon: require("../../../../static/WX/img/wheel_big_5.png"), // 奖品图片
count: , // 奖品级别
name: "五等奖", // 奖品名称
isPrize: // 该奖项是否为奖品
},
{
icon: require("../../../../static/WX/img/wheel_big_2.png"),
count: ,
name: "二等奖",
isPrize:
},
{
icon: require("../../../../static/WX/img/wheel_big_4.png"),
count: ,
name: "四等奖",
isPrize:
},
{
icon: require("../../../../static/WX/img/wheel_big_1.png"),
count: ,
name: "一等奖",
isPrize:
},
{
icon: require("../../../../static/WX/img/wheel_big_6.png"),
count: ,
name: "六等奖",
isPrize:
},
{
count: ,
name: "谢谢参与",
isPrize:
},
{
icon: require("../../../../static/WX/img/wheel_big_3.png"),
count: ,
name: "三等奖",
isPrize:
}
], //奖品列表
hasPrize: false, //是否中奖
start_rotating_degree: , //初始旋转角度
rotate_angle: , //将要旋转的角度
start_rotating_degree_pointer: , //指针初始旋转角度
rotate_angle_pointer: , //指针将要旋转的度数
rotate_transition: "transform 6s ease-in-out", //初始化选中的过度属性控制
rotate_transition_pointer: "transform 12s ease-in-out", //初始化指针过度属性控制
click_flag: true, //是否可以旋转抽奖
item: {}
methods:
rotating(index) {
if (!this.click_flag) return;
var type = ; // 默认为 0 转盘转动 1 箭头和转盘都转动(暂且遗留)
var during_time = ; // 默认为1s
var random = Math.floor(Math.random() * );
var result_index
result_index = this.val
if (this.val == ) { // 这里多余可以不写
result_index =
} else if (this.val == ) {
result_index =
} else if (this.val == ) {
result_index =
} else if (this.val == ) {
result_index =
} else if (this.val == ) {
result_index =
} else if (this.val == ) {
result_index =
} else if (this.val == ) {
result_index =
}
this.valindex = result_index // // 最终要旋转到哪一块
var result_angle = [, , , , , , ]; //最终会旋转到下标的位置所需要的度数，从指针初始位置开始算度数，顺时针或逆时针
var rand_circle = ; // 附加多转几圈，2-3
this.click_flag = false; // 旋转结束前，不允许再次触发
if (type == ) {
// 转动盘子
var rotate_angle =this.start_rotating_degree + rand_circle * +result_angle[result_index] - this.start_rotating_degree % ;
this.start_rotating_degree = rotate_angle;
this.rotate_angle = "rotate(" + rotate_angle + "deg)";
var that = this;
// 旋转结束后，允许再次触发
setTimeout(function() {
that.click_flag = true;
that.game_over();
}, during_time * + ); // 延时，保证转盘转完
} else {
//
}
}
js部分主要是转动停止的角度rotate_angle ，第一次是从0开始到一个角度，在这个角度的基础上到下一个角度，所以会减去上一个角度对圆的取余，这里面this.val是代表着奖品等级，result_index是对应的旋转到的角度，因为旋转是顺时针，所以角度的选择要逆时针的选取。转完调用that.game_over();函数来获取奖品count等级。
下面方法为处理奖品数据
旋转停下来时调用game_over()函数
rotate_handle() {
api.activityget(param).then(res => {
if (res.status == || res.status == '') {
this.item = res.data
this.val = res.data.rewardLevel // 获取获奖等级
this.rotating(); //开始旋转
} else {
this.$vux.alert.show({
title: '提示',
content: res.message,
})
}
})
}
下面是css部分，根据你的奖品等级和数量自动调整距离左边和顶部距离和转动角度。
<style scoped>
.wheel-main {
display: flex;
align-items: center;
justify-content: center;
position: relative;
}
.wheel-bg {
width: 8rem;
height: 8rem;
background: url("../../../static/img/draw_wheel.png") no-repeat center top;
background-size: %;
color: #fff;
font-weight: ;
display: flex;
flex-direction: column;
justify-content: center;
align-content: center;
transition: transform 3s ease;
}
.wheel-pointer-box {
position: absolute;
top: %;
left: %;
z-index: ;
transform: translate(-%, -%);
}
.wheel-pointer {
width: .5rem;
height:.2rem;
background: url("../../../static/img/btn_start_n.png") no-repeat ;
background-size: %;
transform-origin: center %;
}
.wheel-bg div {
text-align: center;
}
.prize-list {
width: %;
height: %;
position: relative;
}
.prize-list .prize-item {
position: absolute;
top: ;
left: ;
z-index: ;
}
.prize-list .prize-item:first-child {
top: .95rem;
left: .9rem;
transform: rotate(-20deg);
}
.prize-list .prize-item:nth-child() {
top: .4rem;
left: 5rem;
transform: rotate(40deg);
}
.prize-list .prize-item:nth-child() {
top: .2rem;
left: .95rem;
transform: rotate(-270deg);
}
.prize-list .prize-item:nth-child() {
top: .08rem;
left: .1rem;
transform: rotate(-225deg);
}
.prize-list .prize-item:nth-child() {
top: .8rem;
left: .2rem;
transform: rotate(-170deg);
}
.prize-list .prize-item:nth-child() {
top: .7rem;
left: .5rem;
transform: rotate(-115deg);
}
.prize-list .prize-item:nth-child() .prize-type{
font-size: .3rem;
}
.prize-list .prize-item:nth-child() {
top: .4rem;
left: .2rem;
transform: rotate(-69deg);
}
.prize-list .prize-item:nth-child() img{
width: .7rem;
}
.prize-list .prize-item:nth-child() {
top: .1rem;
left: .6rem;
transform: rotate(-20deg);
}
.prize-pic img {
width: .8rem;
}
.prize-count {
font-size: .4rem;
}
.prize-type {
font-size: 10px;
}
</style>
Vue 幸运大转盘的更多相关文章
- jQuery幸运大转盘_jQuery+PHP抽奖程序的简单实现
jQuery幸运大转盘_jQuery+PHP抽奖程序的简单实现 在线实例 查看演示 完整代码 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 ...
- asp.net+jQueryRotate开发幸运大转盘
在线抽奖程序在很多网站上很多,抽奖形式多种多样,Flash抽奖偏多,本文将给大家介绍jQuery转盘抽奖,结合代码实例将使用jQuery和asp.net来实现转盘抽奖程序,为了便于理解,文章贴出实现源 ...
- PHP幸运大转盘源码，支持ThinkPHP
原理 先看图 可以看到1-6等奖都只有1个 ,7等奖有6个.指针默认指向上图位置,记为0°. 每个奖项对应不同的角度,圆的角度为360°,分成12块,所以每块为30°. 为了防止指针指着相邻两个将向之 ...
- html5简单拖拽实现自动左右贴边+幸运大转盘
此篇文章主要实现两个功能: 1.点击屏幕下方签到悬浮按钮: 2.弹出幸运大转盘,转盘抽奖签到 效果如图: 在网上找了很多移动端拖拽的js实现方式,大部分都是这一种,html5的touch事件,但是 ...
- PHP+AJAX开发幸运大转盘抽奖
PHP+AJAX开发幸运大转盘抽奖,通过奖品库存.中奖次数来计算中奖概率 奖品设置 $prizes = array( 0 => array( "id" => 0, // ...
- C#保留2位小数几种场景总结 游标遍历所有数据库循环执行修改数据库的sql命令 原生js轮盘抽奖实例分析（幸运大转盘抽奖） javascript中的typeof和类型判断
C#保留2位小数几种场景总结 场景1: C#保留2位小数,.ToString("f2")确实可以,但是如果这个数字本来就小数点后面三位比如1.253,那么转化之后就会变成1.2 ...
- 跟我一起学编程—《Scratch编程》第24课：幸运大转盘
同学你好,欢迎来到<跟我一起学编程>,我是包老师.这是<Scratch3.0编程>课程的第24课,我这节课教你做一个抽奖游戏:幸运大转盘. 学习目标: 1. 能够熟练使用造型工 ...
- 幸运大转盘-jQuery+PHP实现的抽奖程序
目前好多网站上应用的转盘抽奖程序大多是基于flash的,而本文结合实例将使用jQuery和PHP来实现转盘抽奖程序,为了便于理解,作者分两部分来讲解,本文讲解第一部分,侧重使用jQuery实现转盘的转 ...
- WP8.1&Win10幸运大转盘源码分享
先AD一下我的群:Win10开发者群:53078485 最近在写一个APP,其中需要一个转盘动画的源码,找了很多但是都没有找到,无奈只好自己来写,写完效果自己还是比较满意的,分享出来,有需要的童鞋可以 ...
随机推荐
- 【Bug】解决 SpringBoot Artifact contains illegal characters 错误
解决 SpringBoot Artifact contains illegal characters错误 错误原因:Artifact包含非法字符(大写字母) 解决方法:将Artifact名称改成小写 ...
- 设计模式（十九）State模式
在面向对象编程中,是用类表示对象的.也就是说,程序的设计者需要考虑用类来表示什么东西.类对应的东西可能存在于真实世界中,也可能不存在于真实世界中.对于后者,可能有人看到代码后会感到吃惊:这些东西居然也 ...
- Redis（九）哨兵：Redis Sentinel
Redis的主从复制模式下,一旦主节点由于故障不能提供服务,需要人工将从节点晋升为主节点,同时还要通知应用方更新主节点地址,对于很多应用场景这种故障处理的方式是无法接受的. Redis从2.8开始正式 ...
- python之深拷贝和浅拷贝
1.当拷贝的是不可变数据类型(数值.字符串.元组),不管是深拷贝和浅拷贝,都指向的是同一地址: 2.当拷贝的对象是可变数据类型(列表.字典): (1)当浅拷贝的对象中无复杂子对象,原来值的改变不会影响 ...
- K8s 还是 k3s？This is a question
本文来自:Rancher Labs 自k3s问世以来,社区里有许多小伙伴都问过这样的问题"除了中间的数字之外,k3s和K8s的区别在哪里?","在两者之间应该如何选择?& ...
- Apache Solr Velocity模板注入RCE漏洞复现
Apache Solr Velocity模板注入RCE漏洞复现 一.Apache Solr介绍 Solr是一个独立的企业级搜索应用服务器,它对外提供类似于web-service的API接口,用户可以通 ...
- ios发送短信验证码计时器的swift实现
转载自:http://www.jianshu.com/p/024dd2d6e6e6# Update: Xcode 8.2.1 Swift 3 先介绍一下 属性观测器(Property Observer ...
- Vue 实现前进刷新，后退不刷新的效果 玩转vue-router里的meta
Vue 实现前进刷新,后退不刷新的效果 玩转vue-router里的meta. 需求一: 在一个列表页中,第一次进入的时候,请求获取数据. 点击某个列表项,跳到详情页,再从详情页后退回到列表页时,不刷 ...
- 谁说搞Java的不能玩机器学习？
简介 机器学习在全球范围内越来越受欢迎和使用. 它已经彻底改变了某些应用程序的构建方式,并且可能会继续成为我们日常生活中一个巨大的(并且正在增加的)部分. 没有什么包装且机器学习并不简单. 它对许多人 ...
- vue H5页面手机端 利用canvas 签名
签名首先用一个canvas标签,上面加三个代码,分别是点击,移动,离开.这里点击是开始画笔的地方,如果不加@touchstart 笔头会发生偏移,可以试试. @toucheend也是如此.尾巴也会出现 ...