Vue+CSS3完成转盘抽奖的示例编码

日期：2020-12-13 类型：科技新闻我要分享

关键词：html网页制作，php网页制作，网页设计稿，网页编辑工具，学生网页设计模板

近期有个转盘抽奖的要求，搜了1下现有的轮子，有的是用jQuery的动漫涵数完成的，有的是用canvas制图随后再用高频率的setTimeout启用转动方式，前者太老了无法简易移殖到vue新项目，后者觉得特性主要表现将会不容易太好。也是有1些用CSS动漫的计划方案，设计方案了加快-匀速-减速3个动漫，再测算偏转角度让3个动漫尽量无缝拼接对接，但我觉得绕了大远路，应当有更简易轻量的完成计划方案。本人更趋向于用transition来完成，但是在网上的事例觉得还不足好，有的歪斜文本都沒有对齐，最终還是自身笔写了1个。

不用jQuery，无需js脚本制作完成动漫细节，动漫实际效果彻底持续不用对接，适用动态性设定2个以就任意数量的奖项。

关键思路是用transition和rotate完成转动动漫，应用transition-origin和rotate绘图出精准定位较为精准的轮盘奖项。

编码及案例展现

<script src="//unpkg.com/vue/dist/vue.js"></script>
<span id="app">
  <span>Prize number: {{ prizeNumber }}</span>
  <button type="button" @click="!rolling && prizeNumber < 8 && (prizeNumber++)" :disabled="rolling || prizeNumber === 8">Add</button>
  <button type="button" @click="!rolling && prizeNumber > 2 && (prizeNumber--)" :disabled="rolling || prizeNumber === 2">Remove</button>
   <div class="wheel-wrapper">
    <div
      class="wheel-pointer"
      @click="onClickRotate"
    >
      Start
    </div>
    <div
      class="wheel-bg"
      :class="{freeze: freeze}"
      :style="`transform: rotate(${wheelDeg}deg)`"
    >
      <div class="prize-list">
        <div
          class="prize-item-wrapper"
          v-for="(item,index) in prizeList"
          :key="index"
        >
          <div
            class="prize-item"
            :style="`transform: rotate(${(360/ prizeList.length) * index}deg)`"
          >
            <div class="prize-name">
              {{ item.name }}
            </div>
            <div class="prize-icon">
              <img :src="item.icon">
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>
</div>

html {
   background: #DD7C7D;
}

.wheel-wrapper {
    width: 300px;
    height: 300px;
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(⑸0%, ⑸0%);
  }

  .wheel-pointer {
    width: 60px;
    height: 60px;
    border-radius: 1000px;
    background: yellow;
    position: absolute;
    left: 50%;
    top: 50%;
    transform: translate(⑸0%, ⑸0%);
    text-align: center;
    line-height: 60px;
    z-index: 10;
  }
  .wheel-bg {
    width: 100%;
    height: 100%;
    border-radius: 1000px;
    overflow: hidden;
    transition: transform 4s ease-in-out;
    background: #7EEF97;
    
    &.freeze {
      transition: none;
      background: red;
    }
  }

  .prize-list {
    width: 100%;
    height: 100%;
    position: relative;
    text-align: center;
  }

  .prize-item-wrapper {
    position: absolute;
    top: 0;
    left: 50%;
    transform: translateX(⑸0%);
    width: 150px;
    height: 150px;
  }

  .prize-item {
    width: 100%;
    height: 100%;
    transform-origin: bottom;

    .prize-name {
      padding: 16px 0;
    }

    .prize-icon {}
  }

var Main = {
  data() {
    return {
      freeze: false,
      rolling: false,
      wheelDeg: 0,
      prizeNumber: 8,
      prizeListOrigin: [
        {
          icon: "https://picsum.photos/40?random=1",
          name: "$10000"
        },
        {
          icon: "https://picsum.photos/40?random=6",
          name: "Thank you!"
        },
                {
          icon: "https://picsum.photos/40?random=2",
          name: "$500"
        },
        {
          icon: "https://picsum.photos/40?random=3",
          name: "$100"
        },
                {
          icon: "https://picsum.photos/40?random=6",
          name: "Thank you!"
        },
        {
          icon: "https://picsum.photos/40?random=4",
          name: "$50"
        },
        {
          icon: "https://picsum.photos/40?random=5",
          name: "$10"
        },
        {
          icon: "https://picsum.photos/40?random=6",
          name: "Thank you!"
        }
      ]
    };
  },
  computed: {
    prizeList () {
      return this.prizeListOrigin.slice(0, this.prizeNumber)
    }
  },
  methods: {
    onClickRotate() {
      if (this.rolling) {
        return;
      }
      this.rolling = true;
      const { wheelDeg, prizeList } = this;
      const random = Math.floor(Math.random() * (prizeList.length ));
      console.log(random);
      this.wheelDeg =
        wheelDeg -
        wheelDeg % 360 +
        6 * 360 +
        (360 - 360 / prizeList.length * random);
      setTimeout(() => {
        this.rolling = false;
        alert("Result：" + prizeList[random].name);
      }, 4500);
    }
  },
  watch: {
    prizeNumber () {
      this.freeze = true
      this.wheelDeg = 0
     
      setTimeout(() => {
         this.freeze = false
      }, 0)
    }
  }
};
var App = Vue.extend(Main);
new App().$mount("#app");

以上便是本文的所有內容，期待对大伙儿的学习培训有一定的协助，也期待大伙儿多多适用脚本制作之家。

上一篇：CSS设计方案合乎Web规范的网页页面表单的几个技返回下一篇：CSS中应用border来建立3角形的基础方式解读