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,其中需要一个转盘动画的源码,找了很多但是都没有找到,无奈只好自己来写,写完效果自己还是比较满意的,分享出来,有需要的童鞋可以 ...
随机推荐
- SpringMVC重点知识总结
SpringMVC总结 1. SpringMVC简介 MVC即模型-视图-控制器(Model-View-Controller) Spring Web MVC是一种基于Java的实现了Web MVC设计 ...
- redis入门(一)
目录 redis入门(一) 前言 特性 速度快 简单稳定 丰富的功能 历史 历史版本 安装与启动 安装 数据类型与内部编码 数据结构 内部编码 常用API与使用场景 常用命令 字符串 列表 哈希 集合 ...
- C语言 二叉树的遍历(递归和非递归)
#include <iostream> #include <cstdio> #include "biTree.h" #include "cstdl ...
- The value for the useBean class attribute is invalied
JSP: The value for the useBean class attribute XXX is ...
- go map数据结构和源码详解
目录 1. 前言 2. go map的数据结构 2.1 核心结体体 2.2 数据结构图 3. go map的常用操作 3.1 创建 3.2 插入或更新 3.3 删除 3.4 查找 3.5 range迭 ...
- 2018.8.3 python中的set集合及深浅拷贝
一.字符串和列表的相互转化 之前写到想把xx类型的数据转化成yy类型的数据,直接yy(xx)就可以了,但是字符串和列表的转化比较特殊,相互之间的转化要通过join()和split()来实现. 例如: ...
- AB实验的高端玩法系列3 - AB组不随机?观测试验?Propensity Score
背景 都说随机是AB实验的核心,为什么随机这么重要呢?有人说因为随机所以AB组整体不存在差异,这样才能准确估计实验效果(ATE) \[ ATE = E(Y_t(1) - Y_c(0)) \] 那究竟随 ...
- markdown 入门教程(完整版)
Markdown是一种可以使用普通文本编辑器编写的标记语言,通过简单的标记语法,它可以使普通文本内容具有一定的格式. 1. 标题 Markdown支持6种级别的标题,对应html标签 h1 ~ h6 ...
- $POJ2942\ Knights\ of\ the\ Round\ Table$ 图论
正解:图论 解题报告: 传送门! 一道,综合性比较强的题(我是萌新刚学$OI$我只是想练下$tarjan$,,,$QAQ$ 考虑先建个补图,然后现在就变成只有相互连边的点不能做邻居.所以如果有$K$个 ...
- 6、pytest -- 临时目录和文件
目录 1. 相关的fixture 1.1. tmp_path 1.2. tmp_path_factory 1.3. tmpdir 1.4. tmpdir_factory 1.5. 区别 2. 默认的基 ...