zoukankan      html  css  js  c++  java
  • VUE抽奖大转盘制作

     人一闲就无聊 想做点小东西 以后需要的时候拎起来就用嘿嘿嘿 我做的转盘简单没啥难度,样式也是随便整整,里面的图片都是远程的

    <template>
      <div class="turntable">
        <!-- 转盘组件 -->
        <div class="box">
          <div
            class="rotateBg"
            :style="{ transform: rotate_deg, transition: rotate_transition }"
          >
            <img v-bind:src="imgUrl" />
          </div>
          <!-- <div class="draw_btn" @click="startLottery()">
            抽奖
        </div> -->
          <img
            class="draw_btn"
            @click="startLottery()"
            src="https://gimg2.baidu.com/image_search/src=http%3A%2F%2Fpicnew13.photophoto.cn%2F20190309%2Fshouhuikatongzhuanpanzhizhenshiliangtumiankouyuansu-32461880_1.jpg&refer=http%3A%2F%2Fpicnew13.photophoto.cn&app=2002&size=f9999,10000&q=a80&n=0&g=0n&fmt=jpeg?sec=1637395950&t=9719a6c50b3ac3edce375da01305a956"
            alt=""
          />
        </div>
      </div>
    </template>
    <script>
    export default {
      data() {
        return {
          imgUrl:
            "https://gimg2.baidu.com/image_search/src=http%3A%2F%2Fimg-blog.csdnimg.cn%2F20190924173006270.png%3Fx-oss-process%3Dimage%2Fwatermark%2Ctype_ZmFuZ3poZW5naGVpdGk%2Cshadow_10%2Ctext_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L0NhbmR5X21p%2Csize_16%2Ccolor_FFFFFF%2Ct_70&refer=http%3A%2F%2Fimg-blog.csdnimg.cn&app=2002&size=f9999,10000&q=a80&n=0&g=0n&fmt=jpeg?sec=1637378963&t=84d3d536bdcb8f6b7a858e403c6bde40",
          cat: 45, //总共8个扇形区域,每个区域约45度
          isAllowClick: true, //是否能够点击
          start_deg: 0, //初始旋转角度
          rotate_deg: 0, //将要旋转的角度
          rotate: 0, //实际偏移角度
          rotate_transition: "transform 3s ease-in-out", //初始化选中的过度属性控制
          times: null,
          priseId: 80,
        };
      },
      methods: {
         startLottery() {
          if (this.isAllowClick) {
            // this.rotaTime();
            // let req = await this.getPrise();
            // clearInterval(this.times);
            console.log("async this.start_deg", this.start_deg);
            this.rotating();
          }
        },
        getPrise() {
          // 获取奖品
          
        },
        rotating() {
          //   this.isAllowClick = false;
          let rand_circle = 5; //默认多旋转5圈
          let randomDeg = -170; //获取0到359之间的随机度数,可以指定度数对准某个产品如120度是30元,170度是20元现金
          let deg =
            this.start_deg +
            (360 * rand_circle + randomDeg) -
            (this.start_deg % 360); //将要旋转的度数
          this.start_deg = deg; //下一次旋转的开始度数
          this.rotate_deg = "rotate(" + deg + "deg)";
          this.rotate = deg % 360; //实际偏移的度数
          console.log("this.rotate", deg, this.rotate);
        },
        rotaTime() {
          let deg = 0;
          this.times = setInterval(() => {
            deg = deg + 60;
            this.rotate_deg = "rotate(" + deg + "deg)";
            this.start_deg = deg;
            console.log(" this.start_deg", this.start_deg);
          }, 100);
        },
      },
    };
    </script>
    <style lang='scss' scoped>
    .box {
      position: relative;
       700px;
      margin: 0 auto;
    }
    .rotateBg {
       100%;
      img {
         100%;
      }
    }
     
    .draw_btn {
      position: absolute;
      top: 50%;
      left: 50%;
      transform: translate(-50%, -50%);
      height: 140px;
       140px;
      // border-radius: 50%;
      text-align: center;
      line-height: 140px;
      font-size: 30px;
      // background-color: goldenrod;
    }
    </style>
  • 相关阅读:
    Asp.Net Web API 2第八课——Web API 2中的属性路由
    Asp.Net Web API 2第七课——Web API异常处理
    Asp.Net Web API 2第六课——Web API路由和动作选择
    Asp.Net Web API 2第五课——Web API路由
    开始学习python
    BMI 小程序 购物车
    深浅copy 文件操作
    字典 dict 集合set
    基本数据类型 (str,int,bool,tuple,)
    python 运算符
  • 原文地址:https://www.cnblogs.com/huangla/p/15503802.html
Copyright © 2011-2022 走看看