前端vue转盘抽奖

一、 最近有个需求在前端做抽奖的业务，然后查了些资料，实现了一下。效果图如下：

 二、实现原理：CSS的transitions：rotate属性，传入度数即可旋转；调整中奖概率也写的几乎人人可以看懂的流程，也比较巧妙地实现了对概率的控制，称不上多厉害的算法，但确实达到了想要效果。

1.在html中：

<template>
  <div id="bg">
    <img @click="go" class="pointer" src="./pointer.png" alt="pointer">
    <img ref="turntable" class="turntable" src="./turntable.png" alt="turntable">
    <h1>你的抽奖次数为:{
  {goTimes}}</h1>
  </div>
</template>

2.在js中：

export default {
  data(){
    return {
      isGo: false,              //是否正在执行动画
      oTurntable:'',            //执行动画的对象