vue 转盘抽奖功能，可控制抽奖概率

实现逻辑：

思路：首先需要一个转盘，然后需要一个抽奖按钮定位在中间，图片提前设计或者用背景颜色代替（这里用的是图片，然后计算概率），使用css完成转动效果，每次转动完成之后情况定时器任务，具体代码看下面。

图片提供：（若是图片无法下载可留言）

指针图片：http://81.71.27.71:9000/pointer.png
抽奖图片：http://81.71.27.71:9000/turntable.png
抽奖背景图：http://81.71.27.71:9000/turntable-bg.jpg

实现效果：

 

 完整代码：

<template>
  <div class="dial">
    <div class="times">抽奖次数{{LuckyClick}}</div>
    <!-- 转盘包裹 -->
    <div class="rotate">
      <div
        :class="'circle circle_'+index"
        v-for="(item,index) in circleList"
        :key="index"
        :style="{background:index%2==0?colorCircleFirst:colorCircleSecond}"
      ></div>
      <img
        class="dish"
        src="@/assets/img/dial.jpg"
        :style="{transform:rotate_deg,transition:rotate_transition}"
      />
      <img class="pointer" src="@/assets/img/pointer.png" @click="start" />
     
    </div>

  </div>
</template>

<script>
var light_timer; //灯光定时器

export default {
  name: "dial",
  data() {
    return {
      LuckyClick: 3,
      circleList: [], //原点设置
      colorCircleFirst: "#FE4D32", //圆点颜色
      colorCircleSecond: "#fff", //圆点颜色

      cat: 45, //总共8个扇形区域，每个区域约45度
      isAllowClick: true, //是否能够点击
      rotate_deg: 0, //指针旋转的角度
      rotate_transition: "transform 3s ease-in-out" //初始化选中的过度属性控制
    };
  },

  components: {
    // Calendar: Calendar
  },
  created() {
    this.showcircleList();
  },

  watch: {},

  mounted() {},

  methods: {
    //绘制圆点设置
    showcircleList() {
      let circleList = [];
      for (var i = 0; i < 16; i++) {
        circleList.push(i);
      }
      this.circleList = circleList;
      this.light();
    },

    //闪动效果
    light: function() {
      var that = this;
      clearInterval(light_timer);
      light_timer = setInterval(function() {
        if (that.colorCircleFirst == "#FE4D32") {
          that.colorCircleFirst = "#fff";
          that.colorCircleSecond = "#FE4D32";
        } else {
          that.colorCircleFirst = "#FE4D32";
          that.colorCircleSecond = "#fff";
        }
      }, 300); //设置圆点闪烁的效果
    },

    start() {
      if (this.LuckyClick == 0) {
        alert("机会已经用完了");
        return;
      }
      this.rotating();
    },

    rotating() {
      if (!this.isAllowClick) return;
      this.isAllowClick = false;
      this.rotate_transition = "transform 3s ease-in-out";
      this.LuckyClick--;
      var rand_circle = 5; //默认多旋转5圈
      //   var winningIndex = Math.floor(Math.random() * 8); //获奖的下标   0-7   没有概率每个平均
      var winningIndex = this.set(); //设置了概率的

      console.log(winningIndex);
      var randomDeg = 360 - winningIndex * 45; //当前下标对应的角度    45是总共8个扇形区域，每个区域约45度

      var deg = rand_circle * 360 + randomDeg; //将要旋转的度数  由于是顺时针的转动方向需要用360度来减
      this.rotate_deg = "rotate(" + deg + "deg)";

      var that = this;
      setTimeout(function() {
        that.isAllowClick = true;
        that.rotate_deg = "rotate(" + 0 + "deg)"; //定时器关闭的时候重置角度
        that.rotate_transition = "";

        if (winningIndex == 0) {
          alert("恭喜您，IphoneX");
        } else if (winningIndex == 1) {
          alert("恭喜您，获得10元现金");
        } else if (winningIndex == 2) {
          alert("很遗憾，重在参与");
        } else if (winningIndex == 3) {
          alert("恭喜您，获得30元现金");
        } else if (winningIndex == 4) {
          alert("恭喜您，获得20元现金");
        } else if (winningIndex == 5) {
          alert("恭喜您，获得50元现金");
        } else if (winningIndex == 6) {
          alert("恭喜您，获得5元现金");
        } else if (winningIndex == 7) {
          alert("恭喜您，获得100元现金");
        }
      }, 3500);
    },

    //设置概率
    set() {
      var winIndex;
    //方法1
    //   if (Math.floor(Math.random() * 100) < 30) {
    //     console.log("30%的概率,重在参与");
    //     winIndex = 2;
    //   } else if (Math.floor(Math.random() * 100) < 55) {
    //     console.log("25%的概率,5元");
    //     winIndex = 6;
    //   } else if (Math.floor(Math.random() * 100) < 75) {
    //     console.log("20%的概率,10元");
    //     winIndex = 1;
    //   } else if (Math.floor(Math.random() * 100) < 85) {
    //     console.log("10%的概率,20元");
    //     winIndex = 4;
    //   } else if (Math.floor(Math.random() * 100) < 92) {
    //     console.log("7%的概率,30元");
    //     winIndex = 3;
    //   } else if (Math.floor(Math.random() * 100) < 97) {
    //     console.log("5%的概率,50元");
    //     winIndex = 5;
    //   } else if (Math.floor(Math.random() * 100) < 99) {
    //     console.log("2%的概率,100元");
    //     winIndex = 7;
    //   } else if (Math.floor(Math.random() * 100) == 99) {
    //     console.log("1%的概率,IphoneX");
    //     winIndex = 0;
    //   }
      

      //方法2
      var __rand__ = Math.random();
      if (__rand__ < 0.3) winIndex = 2;
      else if (__rand__ < 0.55) winIndex = 6;
      else if (__rand__ < 0.75) winIndex = 1;
      else if (__rand__ < 0.85) winIndex = 4;
      else if (__rand__ < 0.92) winIndex = 3;
      else if (__rand__ < 0.97) winIndex = 5;
      else if (__rand__ < 0.99) winIndex = 7;
      else if (__rand__ == 0.99) winIndex = 0;

      return winIndex;
    }
  },

  computed: {}
};
</script>


<style  scoped lang="scss">
// @import "../../common/common";
.times {
  text-align: center;
  line-height: 0.8rem;
  background: #fff;
}
.rotate {
  width: 6.1rem;
  height: 6.1rem;
  background: #ffbe04;
  border-radius: 50%;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  position: absolute;
  top: 48%;
  left: 50%;
  transform: translate(-50%, -50%);
}

.rotate .dish {
  width: 5.5rem;
  height: 5.5rem;
}

.pointer {
  width: 1.39rem;
  height: 2.03rem;
  position: absolute;
  top: 46%;
  left: 50%;
  transform: translate(-50%, -50%);
}

/* 圆点 */
.rotate .circle {
  position: absolute;
  display: block;
  border-radius: 50%;
  height: 0.16rem;
  width: 0.16rem;
  background: black;
}

.rotate .circle_0 {
  top: 0.08rem;
  left: 2.92rem;
}

.rotate .circle_1 {
  top: 0.28rem;
  left: 4.05rem;
}

.rotate .circle_2 {
  top: 0.86rem;
  left: 4.95rem;
}

.rotate .circle_3 {
  top: 1.85rem;
  left: 5.65rem;
}

.rotate .circle_4 {
  top: 2.85rem;
  right: 0.1rem;
}

.rotate .circle_5 {
  bottom: 1.89rem;
  right: 0.29rem;
}

.rotate .circle_6 {
  bottom: 0.96rem;
  right: 0.88rem;
}

.rotate .circle_7 {
  bottom: 0.34rem;
  right: 1.76rem;
}

.rotate .circle_8 {
  bottom: 0.06rem;
  right: 3.06rem;
}

.rotate .circle_9 {
  bottom: 0.28rem;
  left: 1.9rem;
}

.rotate .circle_10 {
  bottom: 0.96rem;
  left: 0.88rem;
}

.rotate .circle_11 {
  bottom: 1.82rem;
  left: 0.28rem;
}

.rotate .circle_12 {
  top: 2.9rem;
  left: 0.1rem;
}

.rotate .circle_13 {
  top: 1.9rem;
  left: 0.28rem;
}

.rotate .circle_14 {
  top: 1rem;
  left: 0.86rem;
}

.rotate .circle_15 {
  top: 0.32rem;
  left: 1.76rem;
}
</style>

本文来自互联网用户投稿，该文观点仅代表作者本人，不代表本站立场。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如若转载，请注明出处：/a/95257.html

如若内容造成侵权/违法违规/事实不符，请联系我们进行投诉反馈qq邮箱809451989@qq.com，一经查实，立即删除！

相关文章

游戏中的图片打包流程，免费的png打包plist工具，一款把若干资源图片拼接为一张大图的免费工具

游戏中的图片打包流程，免费的png打包plist工具，一款把若干资源图片拼接为一张大图的免费工具

手机游戏开发中&#xff0c;为了提高图片渲染性能&#xff0c;经常需要将小图片合并成一张大图进行渲染。如果手工来做的话就非常耗时。TexturePacker就是一款非常不错方便的处理工具。TexturePacker虽然非常优秀&#xff0c;但不是免费的。 对于打包流程&#xff0c;做游戏的…
阅读更多...
大数据项目实战（Sqoop安装）

大数据项目实战（Sqoop安装）

一&#xff0c;搭建大数据集群环境 1.4 Sqoop安装 1.sqoop安装 &#xff08;1&#xff09;上传安装包 &#xff08;2&#xff09;解压安装包 tar -zxvf sqoop-1.4.6.bin__hadoop-2.0.4-alpha.tar.gz -C /export/servers &#xff08;3&#xff09;重命名 mv sqoop-1.4.6.b…
阅读更多...
继承AndroidView Model的错误

继承AndroidView Model的错误

ViewModelProvider(this)[RegisterViewModel::class.java] 一行简单的代码&#xff0c;总是报这个错误 Caused by: java.lang.NoSuchMethodException: com.xinfa.registerlogin.viewmodel.LoginViewModel. [class android.app.Application] 经过一下午的思索&#xff0c;终于找…
阅读更多...
发光太阳聚光器的蒙特卡洛光线追踪研究（Matlab代码实现）

发光太阳聚光器的蒙特卡洛光线追踪研究（Matlab代码实现）

&#x1f4a5;&#x1f4a5;&#x1f49e;&#x1f49e;欢迎来到本博客❤️❤️&#x1f4a5;&#x1f4a5; &#x1f3c6;博主优势&#xff1a;&#x1f31e;&#x1f31e;&#x1f31e;博客内容尽量做到思维缜密&#xff0c;逻辑清晰&#xff0c;为了方便读者。 ⛳️座右铭&a…
阅读更多...
JVM 内存大对象监控和优化实践

JVM 内存大对象监控和优化实践

作者&#xff1a;vivo 互联网服务器团队 - Liu Zhen、Ye Wenhao 服务器内存问题是影响应用程序性能和稳定性的重要因素之一&#xff0c;需要及时排查和优化。本文介绍了某核心服务内存问题排查与解决过程。首先在JVM与大对象优化上进行了有效的实践&#xff0c;其次在故障转移与…
阅读更多...
【AI】数学基础——高数（积分部分）

【AI】数学基础——高数（积分部分）

高数&#xff08;函数&微分部分&#xff09; 文章目录 1.4 微积分1.4.1 基本思想1.4.2 定积分定义定义计算定积分定积分性质定理N-L公式泰勒公式麦克劳林公式 1.5 求极值1.5.1 无条件极值1.5.2 条件极值1.5.3 多条件极值1.5.4 凹函数与凸函数 1.4 微积分 用于求解速度、面积…
阅读更多...
Windows Qt 5.12.10下载与安装

Windows Qt 5.12.10下载与安装

Qt 入门实战教程&#xff08;目录&#xff09; C自学精简实践教程 目录(必读) 1 Qt5.12.10下载 qt-opensource-windows-x86-5.12.10.exe 官方离线安装包 Download Source Package Offline Installers | Qt 下载巨慢&#xff08;也可能很快&#xff09; 只能下载到最新的&…
阅读更多...
Nodejs快速搭建简单的HTTP服务器，并发布公网远程访问

Nodejs快速搭建简单的HTTP服务器，并发布公网远程访问

前言 Node.js 是能够在服务器端运行 JavaScript 的开放源代码、跨平台运行环境。Node.js 由 OpenJS Foundation&#xff08;原为 Node.js Foundation&#xff0c;已与 JS Foundation 合并&#xff09;持有和维护&#xff0c;亦为 Linux 基金会的项目。Node.js 采用 Google 开发…
阅读更多...
C# Emgu.CV 条码检测

C# Emgu.CV 条码检测

效果 项目 代码 using System; using System.Collections.Generic; using System.ComponentModel; using System.Data; using System.Drawing; using System.Linq; using System.Text; using System.Windows.Forms; using Emgu.CV; using Emgu.CV.Util; using static Emgu.C…
阅读更多...
1960-2022年各国ESG（环境、社会、治理）数据-草案数据集

1960-2022年各国ESG（环境、社会、治理）数据-草案数据集

1960-2022年各国-ESG&#xff08;环境、社会、治理&#xff09;-草案数据集 1、时间&#xff1a;1960-2022年 2、范围&#xff1a;世界各国 3、来源&#xff1a;世界银行 4、说明&#xff1a;世界银行的ESG&#xff08;环境、社会、治理&#xff09;数据草案数据集涵盖了17…
阅读更多...
算法通过村第四关-栈白银笔记|括号问题

算法通过村第四关-栈白银笔记|括号问题

文章目录 前言1. 括号匹配问题2. 最小栈问题3. 最大栈 总结 前言 提示&#xff1a;如果让我送给年轻人四个字&#xff0c;就是&#xff1a;量力而行。 量力而行不会失眠&#xff0c;不会啃老&#xff0c;不会为各种考试焦虑。顺其自然活得轻松。其实&#xff0c;量力而行最易大…
阅读更多...
系统架构：软件工程

系统架构：软件工程

文章目录 资源知识点自顶向下与自底向上形式化方法结构化方法敏捷方法净室软件工程面向服务的方法面向对象的方法快速应用开发螺旋模型软件过程和活动开放式源码开发方法功用驱动开发方法统一过程模型RUP基于构件的软件开发UML 资源 信息系统开发方法 知识点 自顶向下与自底…
阅读更多...
ElasticSearch - 海量数据索引拆分的一些思考

ElasticSearch - 海量数据索引拆分的一些思考

文章目录 困难解决方案初始方案及存在的问题segment merge引入预排序 拆分方案设计考量点如何去除冗余数据按什么维度拆分&#xff0c;拆多少个最终的索引拆分模型演进历程整体迁移流程全量迁移流程流量回放比对验证异步转同步多索引联查优化效果 总结与思考参考 困难 索引数据…
阅读更多...
详细讲解移植u-boot.2022.10版本移植到开发板基本方法

详细讲解移植u-boot.2022.10版本移植到开发板基本方法

大家好&#xff0c;我是ST​。​ 今天给大家讲一讲如何将u-boot.2022.10版本移植到imx6ull开发板上。 环境 选项内容编译主机UbuntuLTS 18.04目标板ATK I.MX6ULL&#xff08;512MB DDR3 8GB EMMC&#xff09;u-boot版本2022.10交叉编译工具链gcc-linaro-7.5.0-2019.12-i686…
阅读更多...
Moonbeam生态跨链互操作项目汇总

Moonbeam生态跨链互操作项目汇总

立秋已过&#xff0c;今年的夏天已经接近尾声&#xff0c;即将迎来凉爽的秋天。Moonbeam生态一同以往持续成长&#xff0c;在8月也举办了不少活动、完成集成合作以及协议更新。让我们一同快速了解Moonbeam生态项目近期发生的大小事件吧&#xff01; Moonwell Moonwell是一个建…
阅读更多...
【c++】VC编译出的版本，发布版本如何使用

【c++】VC编译出的版本，发布版本如何使用

目录 使用release类型进行发布 应用程序无法正常启动 0xc000007b 版本对应 vcruntime140d 应用版本 参考文章 使用release类型进行发布 应用程序无法正常启动 0xc000007b "应用程序无法正常启动 0xc000007b" 错误通常是一个 Windows 应用程序错误&#xf…
阅读更多...
Docker 安装rabbitmq:3.12-management

Docker 安装rabbitmq:3.12-management

拉取镜像&#xff1a; docker pull rabbitmq:3.12-management mkdir -p /usr/local/rabbitmq chmod 777 /usr/local/rabbitmq docker run -id --restartalways --namerabbitmq -v /usr/local/rabbitmq:/var/lib/rabbitmq -p 15672:15672 -p 5672:5672 -e RABBITMQ_DEFAULT_U…
阅读更多...
C++--动态规划背包问题(1)

C++--动态规划背包问题(1)

1. 【模板】01背包_牛客题霸_牛客网 你有一个背包&#xff0c;最多能容纳的体积是V。 现在有n个物品&#xff0c;第i个物品的体积为vivi​ ,价值为wiwi​。 &#xff08;1&#xff09;求这个背包至多能装多大价值的物品&#xff1f; &#xff08;2&#xff09;若背包恰好装满&a…
阅读更多...
Leetcode刷题:395. 至少有 K 个重复字符的最长子串、823. 带因子的二叉树

Leetcode刷题:395. 至少有 K 个重复字符的最长子串、823. 带因子的二叉树

Leetcode刷题:395. 至少有 K 个重复字符的最长子串、823. 带因子的二叉树 1. 395. 至少有 K 个重复字符的最长子串算法思路参考代码和运行结果 2. 823. 带因子的二叉树算法思路参考代码和运行结果 1. 395. 至少有 K 个重复字符的最长子串 题目难度&#xff1a;中等 标签&#…
阅读更多...
c#设计模式-结构型模式 之 外观模式

c#设计模式-结构型模式 之 外观模式

概述 外观模式&#xff08;Facade Pattern&#xff09;又名门面模式&#xff0c;隐藏系统的复杂性&#xff0c;并向客户端提供了一个客户端可以访问系统的接口。这种类型的设计模式属于结构型模式&#xff0c;它向现有的系统添加一个接口&#xff0c;来隐藏系统的复杂性。该模式…
阅读更多...
最新文章

Copyright @ 2022~2023