渲染 JS-VUE 实现无奖品大转盘抽奖活动

2024-01-02 03:41:42

前言

大转盘抽奖活动是一种常见的营销活动形式，通常用于吸引用户参与和提高品牌知名度。JS-VUE 是一个流行的前端框架，可以轻松实现大转盘抽奖活动。

JS-VUE 实现无奖品大转盘抽奖活动

创建 HTML 结构

<div id="app">
  <div class="turntable">
    <img src="./turntable.png" alt="Turntable">
    <div class="pointer"></div>
  </div>
  <button @click="start">Start</button>
</div>

创建 Vue 实例

const app = new Vue({
  el: '#app',
  data: {
    spinning: false,
    angle: 0,
  },
  methods: {
    start() {
      this.spinning = true;
      this.angle = 0;
      const interval = setInterval(() => {
        this.angle += 10;
        if (this.angle >= 360) {
          this.angle = 0;
          clearInterval(interval);
          this.spinning = false;
        }
      }, 50);
    },
  },
});

CSS 样式

.turntable {
  width: 500px;
  height: 500px;
  position: relative;
}

.turntable img {
  width: 100%;
  height: 100%;
}

.pointer {
  position: absolute;
  top: 50%;
  left: 50%;
  width: 50px;
  height: 50px;
  margin-top: -25px;
  margin-left: -25px;
  border: 5px solid black;
  border-radius: 50%;
  background-color: white;
  transform: rotate(0deg);
}

.spinning {
  animation: spin 10s linear infinite;
}

@keyframes spin {
  0% {
    transform: rotate(0deg);
  }
  100% {
    transform: rotate(360deg);
  }
}