转盘抽奖主要有两种，指针转动和转盘转动，个人觉得转盘转动比较好看点，指针转动看着头晕，转盘转动时指针是在转盘的中间位置，这里要用到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. SpringMVC重点知识总结

    SpringMVC总结 1. SpringMVC简介 MVC即模型-视图-控制器(Model-View-Controller) Spring Web MVC是一种基于Java的实现了Web MVC设计 ...

  2. redis入门(一)

    目录 redis入门(一) 前言 特性 速度快 简单稳定 丰富的功能 历史 历史版本 安装与启动 安装 数据类型与内部编码 数据结构 内部编码 常用API与使用场景 常用命令 字符串 列表 哈希 集合 ...

  3. C语言 二叉树的遍历（递归和非递归）

    #include <iostream> #include <cstdio> #include "biTree.h" #include "cstdl ...

  4. T​h​e​ ​v​a​l​u​e​ ​f​o​r​ ​t​h​e​ ​u​s​e​B​e​a​n​ ​c​l​a​s​s​ ​a​t​t​r​i​b​u​t​e​ ​i​s​ ​invalied

    JSP: T​h​e​ ​v​a​l​u​e​ ​f​o​r​ ​t​h​e​ ​u​s​e​B​e​a​n​ ​c​l​a​s​s​ ​a​t​t​r​i​b​u​t​e​ ​X​X​X​ ​i​s ...

  5. go map数据结构和源码详解

    目录 1. 前言 2. go map的数据结构 2.1 核心结体体 2.2 数据结构图 3. go map的常用操作 3.1 创建 3.2 插入或更新 3.3 删除 3.4 查找 3.5 range迭 ...

  6. 2018.8.3 python中的set集合及深浅拷贝

    一.字符串和列表的相互转化 之前写到想把xx类型的数据转化成yy类型的数据,直接yy(xx)就可以了,但是字符串和列表的转化比较特殊,相互之间的转化要通过join()和split()来实现. 例如: ...

  7. AB实验的高端玩法系列3 - AB组不随机？观测试验？Propensity Score

    背景 都说随机是AB实验的核心,为什么随机这么重要呢?有人说因为随机所以AB组整体不存在差异,这样才能准确估计实验效果(ATE) \[ ATE = E(Y_t(1) - Y_c(0)) \] 那究竟随 ...

  8. markdown 入门教程（完整版）

    Markdown是一种可以使用普通文本编辑器编写的标记语言,通过简单的标记语法,它可以使普通文本内容具有一定的格式. 1. 标题 Markdown支持6种级别的标题,对应html标签 h1 ~ h6 ...

  9. $POJ2942\ Knights\ of\ the\ Round\ Table$ 图论

    正解:图论 解题报告: 传送门! 一道,综合性比较强的题(我是萌新刚学$OI$我只是想练下$tarjan$,,,$QAQ$ 考虑先建个补图,然后现在就变成只有相互连边的点不能做邻居.所以如果有$K$个 ...

  10. 6、pytest -- 临时目录和文件

    目录 1. 相关的fixture 1.1. tmp_path 1.2. tmp_path_factory 1.3. tmpdir 1.4. tmpdir_factory 1.5. 区别 2. 默认的基 ...