转盘抽奖主要有两种，指针转动和转盘转动，个人觉得转盘转动比较好看点，指针转动看着头晕，转盘转动时指针是在转盘的中间位置，这里要用到css的transform属性和transition属性，这两个因为不常用最好是上网查查，用法和功能。

在html部分

　　

  1. <div id="wheel_surf">
  2.       <div class="wheel_surf_title">幸运大转盘</div>
  3.        <div class="lucky-wheel">
  4.              <div class="wheel-main">
  5.                   <div class="wheel-pointer-box">
  6.                          <div class="wheel-pointer" @click="rotate_handle()" :style="{transform:rotate_angle_pointer,transition:rotate_transition_pointer}"></div>
  7.                    </div>
  8.                    <div class="wheel-bg" :style="{transform:rotate_angle,transition:rotate_transition}">
  9.                          <div class="prize-list">
  10.                                 <div class="prize-item" v-for="(item,index) in prize_list" :key="index">
  11.                                        <div class="prize-pic" v-if="item.icon">
  12.                                                <img :src="item.icon" />
  13.                                         </div>
  14.                                         <div class="prize-type">
  15. {{item.name}}</div>
  16.                                      </div>
  17.                                </div>
  18.                          </div>
  19.                     </div>
  20.                 </div>
  21.                 <div v-transfer-dom>
  22.                     <x-dialog v-model="showHideOnBlur" class="dialog-demo wheel_dialog" hide-on-blur>
  23.                         <div class="img-box">
  24.                             <div v-show="val == 7" class="noactive">
  25.                                 <p>谢谢参与！祝您下次好运</p>
  26.                             </div>
  27.                             <div v-show="val !== 7">
  28.                                 <p>恭喜你</p>
  29.                                 <img :src="imgActive" />
  30.                                 <p>{{item.rewardDesc}}</p> // 获奖返回值
  31.                             </div>
  32.                         </div>
  33.                         <div @click="showHideOnBlur=false">
  34.                             <span class="vux-close"></span>
  35.                         </div>
  36.                     </x-dialog>
  37.                 </div>
  38.             </div>

　　奖项数据

这里的第一个style部分是指针的位置，距离转动的初始值，是固定不变的，第二个style是转盘的位置transform:rotate_angle是转盘转动的角度，transition:rotate_transition是转动的时候它的转动速度，方向，等等属性。rotate_handle()是点击开始转动的事件。prize_list是转盘上面的奖品图片名字列表。

　　data:

  1. prize_list: [
  2.  
  3.         {
  4.  
  5.                 icon: require("../../../../static/WX/img/wheel_big_5.png"), // 奖品图片
  6.  
  7.                 count: , // 奖品级别
  8.  
  9.                 name: "五等奖", // 奖品名称
  10.  
  11.                 isPrize:  // 该奖项是否为奖品
  12.  
  13.              },
  14.  
  15.             {
  16.  
  17.                 icon: require("../../../../static/WX/img/wheel_big_2.png"),
  18.  
  19.                 count: ,
  20.  
  21.                 name: "二等奖",
  22.  
  23.                 isPrize: 
  24.  
  25.             },
  26.  
  27.            {
  28.  
  29.                 icon: require("../../../../static/WX/img/wheel_big_4.png"),
  30.  
  31.                 count: ,
  32.  
  33.                 name: "四等奖",
  34.  
  35.                 isPrize: 
  36.  
  37.             },
  38.  
  39.            {
  40.  
  41.                 icon: require("../../../../static/WX/img/wheel_big_1.png"),
  42.  
  43.                 count: ,
  44.  
  45.                 name: "一等奖",
  46.  
  47.                 isPrize: 
  48.  
  49.             },
  50.  
  51.            {
  52.  
  53.                 icon: require("../../../../static/WX/img/wheel_big_6.png"),
  54.  
  55.                 count: ,
  56.  
  57.                 name: "六等奖",
  58.  
  59.                 isPrize: 
  60.  
  61.             },
  62.  
  63.            {
  64.  
  65.                 count: ,
  66.  
  67.                 name: "谢谢参与",
  68.  
  69.                 isPrize: 
  70.  
  71.             },
  72.  
  73.            {
  74.  
  75.                 icon: require("../../../../static/WX/img/wheel_big_3.png"),
  76.  
  77.                 count: ,
  78.  
  79.                 name: "三等奖",
  80.  
  81.                 isPrize: 
  82.  
  83.             }
  1.        ], //奖品列表
  2.  
  3.         hasPrize: false, //是否中奖
  4.  
  5.         start_rotating_degree: , //初始旋转角度
  6.  
  7.         rotate_angle: , //将要旋转的角度
  8.  
  9.         start_rotating_degree_pointer: , //指针初始旋转角度
  10.  
  11.         rotate_angle_pointer: , //指针将要旋转的度数
  12.  
  13.         rotate_transition: "transform 6s ease-in-out", //初始化选中的过度属性控制
  14.  
  15.         rotate_transition_pointer: "transform 12s ease-in-out", //初始化指针过度属性控制
  16.  
  17.         click_flag: true, //是否可以旋转抽奖
  18.  
  19.         item: {}

　　methods:

　　

  1.  rotating(index) {
  2.  
  3.             if (!this.click_flag) return;
  4.  
  5.             var type = ; // 默认为 0  转盘转动 1 箭头和转盘都转动(暂且遗留)
  6.  
  7.             var during_time = ; // 默认为1s
  8.  
  9.             var random = Math.floor(Math.random() * );
  10.  
  11.             var result_index
  12.  
  13.             result_index = this.val
  14.  
  15.             if (this.val == ) { // 这里多余可以不写
  16.  
  17.                 result_index = 
  18.  
  19.             } else if (this.val == ) {
  20.  
  21.                 result_index = 
  22.  
  23.             } else if (this.val == ) {
  24.  
  25.                 result_index = 
  26.  
  27.             } else if (this.val == ) {
  28.  
  29.                 result_index = 
  30.  
  31.             } else if (this.val == ) {
  32.  
  33.                 result_index = 
  34.  
  35.             } else if (this.val == ) {
  36.  
  37.                 result_index = 
  38.  
  39.             } else if (this.val == ) {
  40.  
  41.                 result_index = 
  42.  
  43.             }
  44.  
  45.             this.valindex = result_index // // 最终要旋转到哪一块
  46.  
  47.             var result_angle = [, , , , , , ]; //最终会旋转到下标的位置所需要的度数，从指针初始位置开始算度数，顺时针或逆时针
  48.  
  49.             var rand_circle = ; // 附加多转几圈，2-3
  50.  
  51.             this.click_flag = false; // 旋转结束前，不允许再次触发
  52.  
  53.             if (type == ) {
  54.  
  55.                 // 转动盘子
  56.  
  57.                 var rotate_angle =this.start_rotating_degree + rand_circle *  +result_angle[result_index] - this.start_rotating_degree % ;
  58.  
  59.                 this.start_rotating_degree = rotate_angle;
  60.  
  61.                 this.rotate_angle = "rotate(" + rotate_angle + "deg)";
  62.  
  63.                 var that = this;
  64.  
  65.                 // 旋转结束后，允许再次触发
  66.  
  67.                 setTimeout(function() {
  68.  
  69.                     that.click_flag = true;
  70.  
  71.                     that.game_over();
  72.  
  73.                 }, during_time *  + ); // 延时，保证转盘转完
  74.  
  75.             } else {
  76.  
  77.             //
  78.  
  79.             }
  80.  
  81.         }

js部分主要是转动停止的角度rotate_angle ，第一次是从0开始到一个角度，在这个角度的基础上到下一个角度，所以会减去上一个角度对圆的取余，这里面this.val是代表着奖品等级，result_index是对应的旋转到的角度，因为旋转是顺时针，所以角度的选择要逆时针的选取。转完调用that.game_over();函数来获取奖品count等级。

下面方法为处理奖品数据

　　旋转停下来时调用game_over()函数

  1.  rotate_handle() {
  2.  
  3.             api.activityget(param).then(res => {
  4.  
  5.                 if (res.status ==  || res.status == '') {
  6.  
  7.                     this.item = res.data
  8.  
  9.                     this.val = res.data.rewardLevel // 获取获奖等级
  10.  
  11.                     this.rotating(); //开始旋转
  12.  
  13.                  } else {
  14.  
  15.                     this.$vux.alert.show({
  16.  
  17.                         title: '提示',
  18.  
  19.                         content: res.message,
  20.  
  21.                     })
  22.  
  23.                 }
  24.  
  25.             })
  26.  
  27.         }

下面是css部分，根据你的奖品等级和数量自动调整距离左边和顶部距离和转动角度。

  1. <style scoped>
  2.  
  3.     .wheel-main {
  4.  
  5.       display: flex;
  6.  
  7.       align-items: center;
  8.  
  9.       justify-content: center;
  10.  
  11.       position: relative;
  12.  
  13.     }
  14.  
  15.     .wheel-bg {
  16.  
  17.       width: 8rem;
  18.  
  19.       height: 8rem;
  20.  
  21.       background: url("../../../static/img/draw_wheel.png") no-repeat center top;
  22.  
  23.       background-size: %;
  24.  
  25.       color: #fff;
  26.  
  27.       font-weight: ;
  28.  
  29.       display: flex;
  30.  
  31.       flex-direction: column;
  32.  
  33.       justify-content: center;
  34.  
  35.       align-content: center;
  36.  
  37.       transition: transform 3s ease;
  38.  
  39.     }
  40.  
  41.     .wheel-pointer-box {
  42.  
  43.       position: absolute;
  44.  
  45.       top:  %;
  46.  
  47.       left: %;
  48.  
  49.       z-index: ;
  50.  
  51.       transform: translate(-%, -%);
  52.  
  53.     }
  54.  
  55.     .wheel-pointer {
  56.  
  57.       width: .5rem;
  58.  
  59.       height:.2rem;
  60.  
  61.       background: url("../../../static/img/btn_start_n.png") no-repeat ;
  62.  
  63.       background-size: %;
  64.  
  65.       transform-origin: center %;
  66.  
  67.     }
  68.  
  69.     .wheel-bg div {
  70.  
  71.       text-align: center;
  72.  
  73.     }
  74.  
  75.     .prize-list {
  76.  
  77.       width: %;
  78.  
  79.       height: %;
  80.  
  81.       position: relative;
  82.  
  83.     }
  84.  
  85.     .prize-list .prize-item {
  86.  
  87.       position: absolute;
  88.  
  89.       top: ;
  90.  
  91.       left: ;
  92.  
  93.       z-index: ;
  94.  
  95.     }
  96.  
  97.     .prize-list .prize-item:first-child {
  98.  
  99.       top: .95rem;
  100.  
  101.       left: .9rem;
  102.  
  103.       transform: rotate(-20deg);
  104.  
  105.     }
  106.  
  107.     .prize-list .prize-item:nth-child() {
  108.  
  109.       top: .4rem;
  110.  
  111.       left: 5rem;
  112.  
  113.       transform: rotate(40deg);
  114.  
  115.     }
  116.  
  117.     .prize-list .prize-item:nth-child() {
  118.  
  119.       top: .2rem;
  120.  
  121.       left: .95rem;
  122.  
  123.       transform: rotate(-270deg);
  124.  
  125.     }
  126.  
  127.     .prize-list .prize-item:nth-child() {
  128.  
  129.       top: .08rem;
  130.  
  131.       left: .1rem;
  132.  
  133.       transform: rotate(-225deg);
  134.  
  135.     }
  136.  
  137.     .prize-list .prize-item:nth-child() {
  138.  
  139.       top: .8rem;
  140.  
  141.       left: .2rem;
  142.  
  143.       transform: rotate(-170deg);
  144.  
  145.     }
  146.  
  147.     .prize-list .prize-item:nth-child() {
  148.  
  149.       top: .7rem;
  150.  
  151.       left: .5rem;
  152.  
  153.       transform: rotate(-115deg);
  154.  
  155.     }
  156.  
  157.     .prize-list .prize-item:nth-child() .prize-type{
  158.  
  159.       font-size: .3rem;
  160.  
  161.     }
  162.  
  163.     .prize-list .prize-item:nth-child() {
  164.  
  165.       top: .4rem;
  166.  
  167.       left: .2rem;
  168.  
  169.       transform: rotate(-69deg);
  170.  
  171.     }
  172.  
  173.     .prize-list .prize-item:nth-child() img{
  174.  
  175.       width: .7rem;
  176.  
  177.     }
  178.  
  179.     .prize-list .prize-item:nth-child() {
  180.  
  181.       top: .1rem;
  182.  
  183.       left: .6rem;
  184.  
  185.       transform: rotate(-20deg);
  186.  
  187.     }
  188.  
  189.     .prize-pic img {
  190.  
  191.       width: .8rem;
  192.  
  193.     }
  194.  
  195.     .prize-count {
  196.  
  197.       font-size: .4rem;
  198.  
  199.     }
  200.  
  201.     .prize-type {
  202.  
  203.       font-size: 10px;
  204.  
  205.     }
  206.  
  207. </style>

Vue 幸运大转盘的更多相关文章

  1. jQuery幸运大转盘_jQuery+PHP抽奖程序的简单实现

    jQuery幸运大转盘_jQuery+PHP抽奖程序的简单实现 在线实例 查看演示 完整代码 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 ...

  2. asp.net+jQueryRotate开发幸运大转盘

    在线抽奖程序在很多网站上很多,抽奖形式多种多样,Flash抽奖偏多,本文将给大家介绍jQuery转盘抽奖,结合代码实例将使用jQuery和asp.net来实现转盘抽奖程序,为了便于理解,文章贴出实现源 ...

  3. PHP幸运大转盘源码，支持ThinkPHP

    原理 先看图 可以看到1-6等奖都只有1个 ,7等奖有6个.指针默认指向上图位置,记为0°. 每个奖项对应不同的角度,圆的角度为360°,分成12块,所以每块为30°. 为了防止指针指着相邻两个将向之 ...

  4. html5简单拖拽实现自动左右贴边+幸运大转盘

    此篇文章主要实现两个功能: 1.点击屏幕下方签到悬浮按钮: 2.弹出幸运大转盘,转盘抽奖签到 效果如图: ​ 在网上找了很多移动端拖拽的js实现方式,大部分都是这一种,html5的touch事件,但是 ...

  5. PHP+AJAX开发幸运大转盘抽奖

    PHP+AJAX开发幸运大转盘抽奖,通过奖品库存.中奖次数来计算中奖概率 奖品设置 $prizes = array( 0 => array( "id" => 0, // ...

  6. C#保留2位小数几种场景总结 游标遍历所有数据库循环执行修改数据库的sql命令 原生js轮盘抽奖实例分析（幸运大转盘抽奖） javascript中的typeof和类型判断

    C#保留2位小数几种场景总结   场景1: C#保留2位小数,.ToString("f2")确实可以,但是如果这个数字本来就小数点后面三位比如1.253,那么转化之后就会变成1.2 ...

  7. 跟我一起学编程—《Scratch编程》第24课：幸运大转盘

    同学你好,欢迎来到<跟我一起学编程>,我是包老师.这是<Scratch3.0编程>课程的第24课,我这节课教你做一个抽奖游戏:幸运大转盘. 学习目标: 1. 能够熟练使用造型工 ...

  8. 幸运大转盘-jQuery+PHP实现的抽奖程序

    目前好多网站上应用的转盘抽奖程序大多是基于flash的,而本文结合实例将使用jQuery和PHP来实现转盘抽奖程序,为了便于理解,作者分两部分来讲解,本文讲解第一部分,侧重使用jQuery实现转盘的转 ...

  9. WP8.1&Win10幸运大转盘源码分享

    先AD一下我的群:Win10开发者群:53078485 最近在写一个APP,其中需要一个转盘动画的源码,找了很多但是都没有找到,无奈只好自己来写,写完效果自己还是比较满意的,分享出来,有需要的童鞋可以 ...

随机推荐

  1. 百万年薪python之路 -- socket()模块的用法

    socket()模块的用法: import socket socket.socket(socket_family,socket_type,protocal=0) socket_family 可以是 A ...

  2. 元素“context:component-scan”的前缀“context”未绑定

    首先报这个错误,你得明白,是什么原因导致的? 答:未引入命名空间,和约束文件 解决方法(加上标红色标记): <?xml version="1.0" encoding=&quo ...

  3. 一:XMind

  4. 从《国产凌凌漆》看到《头号玩家》，你就能全面了解5G

    2019 年 9 月,移动.联通.电信5G套餐预约总和已突破 1000 万.2019 年 11 月,三大电信运营商将在全国范围内提供携号转网服务.2019 年内,移动将建立 5 万个 5G 基站,联通 ...

  5. vue cli 4.0.5 的使用

    vue cli 4.0.5 的使用 现在的 vue 脚手架已经升级到4.0的版本了,前两日vue 刚发布了3.0版本,我看了一下cli 4 和cli 3 没什么区别,既然这样,就只总结一下vue cl ...

  6. AtCoder Grand Contest 038

    目录 \(\bf A - 01 \ Matrix\) \(\bf B- Sorting \ a \ Segment\) \(\bf C-LCMs\) \(\bf D-Unique \ Path\) 这 ...

  7. 测试面试题集-测试用例设计：登录、购物车、QQ收藏表情、转账、充值、提现

    以下内容首发于微信公众号[ITester软件测试小栈]: 测试面试题集-2.测试用例设计 大家好 我是coco小锦鲤 上周五给大家分享了测试基础理论题 这个周五给大家分享测试用例设计题 测试用例的考察 ...

  8. Python实现发送邮件代码

    代码如下: # -*- coding: utf-8 -*- #!/usr/bin/env python # @Time : 2017/12/22 17:50 # @Desc : # @File : m ...

  9. 模拟示例raid 5(5块磁盘 3块做raid 2块做备份 ) raid 10(5块磁盘) 修改版

    RAID5:需要至少三块(含)硬盘,兼顾存储性能.数据安全和储存成本. RAID10:需要至少四块(含)硬盘,兼具速度和安全性,但成本很高. raid 10(5块磁盘) 1.添加硬盘设备(添加5块) ...

  10. 简单的私有DockerHub搭建

    Docker Hub 目前Docker官方维护了一个公共仓库https://hub.docker.com, 其中已经包括100000+个的镜像.大部分需求都可以通过在 Docker hub中直接下载镜 ...