经验首页 前端设计 程序设计 Java相关 移动开发 数据库/运维 软件/图像 大数据/云计算 其他经验
当前位置:技术经验 » JS/JS库/框架 » Vue.js » 查看文章
vue实现大转盘抽奖功能
来源:jb51  时间:2022/3/8 12:55:15  对本文有异议

本文实例为大家分享了vue实现大转盘抽奖的具体代码,供大家参考,具体内容如下

效果图如下

中奖提示

代码如下

  1. <template>
  2. ? <div class="dial" v-wechat-title="$route.meta.title">
  3. ? ? <div class="times">抽奖次数{{LuckyClick}}</div>
  4. ? ? <!-- 转盘包裹 -->
  5. ? ? <div class="rotate">
  6. ? ? ? <!-- 绘制圆点 -->
  7. ? ? ? <div
  8. ? ? ? ? :class="'circle circle_'+index"
  9. ? ? ? ? v-for="(item,index) in circleList"
  10. ? ? ? ? :key="index"
  11. ? ? ? ? :style="{background:index%2==0?colorCircleFirst:colorCircleSecond}"
  12. ? ? ? ></div>
  13. ? ? ? <!-- 转盘图片 -->
  14. ? ? ? <img
  15. ? ? ? ? class="dish"
  16. ? ? ? ? src="../../assets/dial.png"
  17. ? ? ? ? :style="{transform:rotate_deg,transition:rotate_transition}"
  18. ? ? ? />
  19. ? ? ? <!-- 指针图片 -->
  20. ? ? ? <img class="pointer" src="../../assets/click.png" @click="start" />
  21. ? ? </div>
  22. ? </div>
  23. </template>
  24. ?
  25. <script>
  26. var light_timer; //灯光定时器
  27. ?
  28. export default {
  29. ? name: "dial",
  30. ? data() {
  31. ? ? return {
  32. ? ? ? LuckyClick: 3,
  33. ? ? ? circleList: [], //原点设置
  34. ? ? ? colorCircleFirst: "#FE4D32", //圆点颜色
  35. ? ? ? colorCircleSecond: "#fff", //圆点颜色
  36. ?
  37. ? ? ? cat: 45, //总共8个扇形区域,每个区域约45度
  38. ? ? ? isAllowClick: true, //是否能够点击
  39. ? ? ? rotate_deg: 0, //指针旋转的角度
  40. ? ? ? rotate_transition: "transform 3s ease-in-out" //初始化选中的过度属性控制
  41. ? ? };
  42. ? },
  43. ?
  44. ? components: {
  45. ? ? // Calendar: Calendar
  46. ? },
  47. ? created() {
  48. ? ? this.showcircleList();
  49. ? },
  50. ?
  51. ? watch: {},
  52. ?
  53. ? mounted() {},
  54. ?
  55. ? methods: {
  56. ? ? //绘制圆点设置
  57. ? ? showcircleList() {
  58. ? ? ? let circleList = [];
  59. ? ? ? for (var i = 0; i < 16; i++) {
  60. ? ? ? ? circleList.push(i);
  61. ? ? ? }
  62. ? ? ? this.circleList = circleList;
  63. ? ? ? this.light();
  64. ? ? },
  65. ?
  66. ? ? //闪动效果
  67. ? ? light: function() {
  68. ? ? ? var that = this;
  69. ? ? ? clearInterval(light_timer);
  70. ? ? ? light_timer = setInterval(function() {
  71. ? ? ? ? if (that.colorCircleFirst == "#FE4D32") {
  72. ? ? ? ? ? that.colorCircleFirst = "#fff";
  73. ? ? ? ? ? that.colorCircleSecond = "#FE4D32";
  74. ? ? ? ? } else {
  75. ? ? ? ? ? that.colorCircleFirst = "#FE4D32";
  76. ? ? ? ? ? that.colorCircleSecond = "#fff";
  77. ? ? ? ? }
  78. ? ? ? }, 300); //设置圆点闪烁的效果
  79. ? ? },
  80. ?
  81. ? ? start() {
  82. ? ? ? if (this.LuckyClick == 0) {
  83. ? ? ? ? alert("机会已经用完了");
  84. ? ? ? ? return;
  85. ? ? ? }
  86. ? ? ? this.rotating();
  87. ? ? },
  88. ?
  89. ? ? rotating() {
  90. ? ? ? if (!this.isAllowClick) return;
  91. ? ? ? this.isAllowClick = false;
  92. ? ? ? this.rotate_transition = "transform 3s ease-in-out";
  93. ? ? ? this.LuckyClick--;
  94. ? ? ? var rand_circle = 5; //默认多旋转5圈
  95. ? ? ? // ? var winningIndex = Math.floor(Math.random() * 8); //获奖的下标 ? 0-7 ? 没有概率每个平均
  96. ? ? ? var winningIndex = this.set(); //设置了概率的
  97. ?
  98. ? ? ? console.log(winningIndex);
  99. ? ? ? var randomDeg = 360 - winningIndex * 45; //当前下标对应的角度 ? ?45是总共8个扇形区域,每个区域约45度
  100. ?
  101. ? ? ? var deg = rand_circle * 360 + randomDeg; //将要旋转的度数 ?由于是顺时针的转动方向需要用360度来减
  102. ? ? ? this.rotate_deg = "rotate(" + deg + "deg)";
  103. ?
  104. ? ? ? var that = this;
  105. ? ? ? setTimeout(function() {
  106. ? ? ? ? that.isAllowClick = true;
  107. ? ? ? ? that.rotate_deg = "rotate(" + 0 + "deg)"; //定时器关闭的时候重置角度
  108. ? ? ? ? that.rotate_transition = "";
  109. ?
  110. ? ? ? ? if (winningIndex == 0) {
  111. ? ? ? ? ? alert("恭喜您,IphoneX");
  112. ? ? ? ? } else if (winningIndex == 1) {
  113. ? ? ? ? ? alert("恭喜您,获得10元现金");
  114. ? ? ? ? } else if (winningIndex == 2) {
  115. ? ? ? ? ? alert("很遗憾,重在参与");
  116. ? ? ? ? } else if (winningIndex == 3) {
  117. ? ? ? ? ? alert("恭喜您,获得30元现金");
  118. ? ? ? ? } else if (winningIndex == 4) {
  119. ? ? ? ? ? alert("恭喜您,获得20元现金");
  120. ? ? ? ? } else if (winningIndex == 5) {
  121. ? ? ? ? ? alert("恭喜您,获得50元现金");
  122. ? ? ? ? } else if (winningIndex == 6) {
  123. ? ? ? ? ? alert("恭喜您,获得5元现金");
  124. ? ? ? ? } else if (winningIndex == 7) {
  125. ? ? ? ? ? alert("恭喜您,获得100元现金");
  126. ? ? ? ? }
  127. ? ? ? }, 3500);
  128. ? ? },
  129. ?
  130. ? ? //设置概率
  131. ? ? set() {
  132. ? ? ? var winIndex;
  133. ? ? //方法1
  134. ? ? // ? if (Math.floor(Math.random() * 100) < 30) {
  135. ? ? // ? ? console.log("30%的概率,重在参与");
  136. ? ? // ? ? winIndex = 2;
  137. ? ? // ? } else if (Math.floor(Math.random() * 100) < 55) {
  138. ? ? // ? ? console.log("25%的概率,5元");
  139. ? ? // ? ? winIndex = 6;
  140. ? ? // ? } else if (Math.floor(Math.random() * 100) < 75) {
  141. ? ? // ? ? console.log("20%的概率,10元");
  142. ? ? // ? ? winIndex = 1;
  143. ? ? // ? } else if (Math.floor(Math.random() * 100) < 85) {
  144. ? ? // ? ? console.log("10%的概率,20元");
  145. ? ? // ? ? winIndex = 4;
  146. ? ? // ? } else if (Math.floor(Math.random() * 100) < 92) {
  147. ? ? // ? ? console.log("7%的概率,30元");
  148. ? ? // ? ? winIndex = 3;
  149. ? ? // ? } else if (Math.floor(Math.random() * 100) < 97) {
  150. ? ? // ? ? console.log("5%的概率,50元");
  151. ? ? // ? ? winIndex = 5;
  152. ? ? // ? } else if (Math.floor(Math.random() * 100) < 99) {
  153. ? ? // ? ? console.log("2%的概率,100元");
  154. ? ? // ? ? winIndex = 7;
  155. ? ? // ? } else if (Math.floor(Math.random() * 100) == 99) {
  156. ? ? // ? ? console.log("1%的概率,IphoneX");
  157. ? ? // ? ? winIndex = 0;
  158. ? ? // ? }
  159. ? ? ??
  160. ?
  161. ? ? ? //方法2
  162. ? ? ? var __rand__ = Math.random();
  163. ? ? ? if (__rand__ < 0.3) winIndex = 2;
  164. ? ? ? else if (__rand__ < 0.55) winIndex = 6;
  165. ? ? ? else if (__rand__ < 0.75) winIndex = 1;
  166. ? ? ? else if (__rand__ < 0.85) winIndex = 4;
  167. ? ? ? else if (__rand__ < 0.92) winIndex = 3;
  168. ? ? ? else if (__rand__ < 0.97) winIndex = 5;
  169. ? ? ? else if (__rand__ < 0.99) winIndex = 7;
  170. ? ? ? else if (__rand__ = 0.99) winIndex = 0;
  171. ?
  172. ? ? ? return winIndex;
  173. ? ? }
  174. ? },
  175. ?
  176. ? computed: {}
  177. };
  178. </script>
  179. ?
  180. ?
  181. <style ?scoped lang="scss">
  182. @import "../../common/common";
  183. .times {
  184. ? text-align: center;
  185. ? line-height: 0.8rem;
  186. ? background: #fff;
  187. }
  188. .rotate {
  189. ? width: 6.1rem;
  190. ? height: 6.1rem;
  191. ? background: #ffbe04;
  192. ? border-radius: 50%;
  193. ? display: flex;
  194. ? flex-direction: column;
  195. ? align-items: center;
  196. ? justify-content: center;
  197. ? position: absolute;
  198. ? top: 48%;
  199. ? left: 50%;
  200. ? transform: translate(-50%, -50%);
  201. }
  202. ?
  203. .rotate .dish {
  204. ? width: 5.5rem;
  205. ? height: 5.5rem;
  206. }
  207. ?
  208. .pointer {
  209. ? width: 1.39rem;
  210. ? height: 2.03rem;
  211. ? position: absolute;
  212. ? top: 46%;
  213. ? left: 50%;
  214. ? transform: translate(-50%, -50%);
  215. }
  216. ?
  217. /* 圆点 */
  218. .rotate .circle {
  219. ? position: absolute;
  220. ? display: block;
  221. ? border-radius: 50%;
  222. ? height: 0.16rem;
  223. ? width: 0.16rem;
  224. ? background: black;
  225. }
  226. ?
  227. .rotate .circle_0 {
  228. ? top: 0.08rem;
  229. ? left: 2.92rem;
  230. }
  231. ?
  232. .rotate .circle_1 {
  233. ? top: 0.28rem;
  234. ? left: 4.05rem;
  235. }
  236. ?
  237. .rotate .circle_2 {
  238. ? top: 0.86rem;
  239. ? left: 4.95rem;
  240. }
  241. ?
  242. .rotate .circle_3 {
  243. ? top: 1.85rem;
  244. ? left: 5.65rem;
  245. }
  246. ?
  247. .rotate .circle_4 {
  248. ? top: 2.85rem;
  249. ? right: 0.1rem;
  250. }
  251. ?
  252. .rotate .circle_5 {
  253. ? bottom: 1.89rem;
  254. ? right: 0.29rem;
  255. }
  256. ?
  257. .rotate .circle_6 {
  258. ? bottom: 0.96rem;
  259. ? right: 0.88rem;
  260. }
  261. ?
  262. .rotate .circle_7 {
  263. ? bottom: 0.34rem;
  264. ? right: 1.76rem;
  265. }
  266. ?
  267. .rotate .circle_8 {
  268. ? bottom: 0.06rem;
  269. ? right: 3.06rem;
  270. }
  271. ?
  272. .rotate .circle_9 {
  273. ? bottom: 0.28rem;
  274. ? left: 1.9rem;
  275. }
  276. ?
  277. .rotate .circle_10 {
  278. ? bottom: 0.96rem;
  279. ? left: 0.88rem;
  280. }
  281. ?
  282. .rotate .circle_11 {
  283. ? bottom: 1.82rem;
  284. ? left: 0.28rem;
  285. }
  286. ?
  287. .rotate .circle_12 {
  288. ? top: 2.9rem;
  289. ? left: 0.1rem;
  290. }
  291. ?
  292. .rotate .circle_13 {
  293. ? top: 1.9rem;
  294. ? left: 0.28rem;
  295. }
  296. ?
  297. .rotate .circle_14 {
  298. ? top: 1rem;
  299. ? left: 0.86rem;
  300. }
  301. ?
  302. .rotate .circle_15 {
  303. ? top: 0.32rem;
  304. ? left: 1.76rem;
  305. }
  306. </style>

本文中用到的图片

大转盘图片如下

指针的图片如下:

以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持w3xue。

 友情链接:直通硅谷  点职佳  北美留学生论坛

本站QQ群:前端 618073944 | Java 606181507 | Python 626812652 | C/C++ 612253063 | 微信 634508462 | 苹果 692586424 | C#/.net 182808419 | PHP 305140648 | 运维 608723728

W3xue 的所有内容仅供测试,对任何法律问题及风险不承担任何责任。通过使用本站内容随之而来的风险与本站无关。
关于我们  |  意见建议  |  捐助我们  |  报错有奖  |  广告合作、友情链接(目前9元/月)请联系QQ:27243702 沸活量
皖ICP备17017327号-2 皖公网安备34020702000426号