360度炫酷转盘抽奖页面，html+css+js轻松搞定

2023-11-07 07:53:31

打造炫酷的 360 度转盘抽奖页面：一个全面的指南

转盘抽奖一直是吸引参与者和增加娱乐性的绝佳方式。如果您正在寻找一种方法来提升您的在线活动或营销活动，那么创建您自己的转盘抽奖页面是一个完美的解决方案。使用 HTML、CSS 和 JavaScript，您可以轻松制作一个令人惊叹且引人入胜的转盘，让参与者兴奋不已。

1. 准备工作

在开始之前，您需要准备以下内容：

文本编辑器（例如记事本、Sublime Text 或 Atom）
浏览器（例如 Chrome、Firefox 或 Edge）
图片编辑软件（例如 Photoshop 或 GIMP）

2. 创建 HTML 文件

HTML 是您页面的骨架，它定义了其结构和内容。创建一个新的 HTML 文件并添加以下代码：

<!DOCTYPE html>
<html>
<head>
  <link rel="stylesheet" href="style.css">
  <script src="script.js"></script>
</head>
<body>
  <div class="turntable-container">
    <div class="turntable">
      <div class="turntable-item">奖品 1</div>
      <div class="turntable-item">奖品 2</div>
      <div class="turntable-item">奖品 3</div>
      <div class="turntable-item">奖品 4</div>
      <div class="turntable-item">奖品 5</div>
      <div class="turntable-item">奖品 6</div>
      <div class="turntable-item">奖品 7</div>
      <div class="turntable-item">奖品 8</div>
    </div>
    <div class="turntable-pointer"></div>
  </div>
  <button id="start-button">开始抽奖</button>
</body>
</html>

3. 创建 CSS 文件

CSS 用于样式化您的页面，使它看起来美观而具有吸引力。创建一个新的 CSS 文件并添加以下代码：

/* 全局样式 */

body {
  font-family: Arial, sans-serif;
  margin: 0;
  padding: 0;
}

/* 转盘容器样式 */

.turntable-container {
  width: 500px;
  height: 500px;
  position: relative;
  margin: 0 auto;
}

/* 转盘样式 */

.turntable {
  width: 400px;
  height: 400px;
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  border: 1px solid #ccc;
  border-radius: 50%;
  background-color: #fff;
}

/* 转盘奖品样式 */

.turntable-item {
  width: 100px;
  height: 100px;
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  text-align: center;
  line-height: 100px;
  font-size: 20px;
}

/* 转盘指针样式 */

.turntable-pointer {
  width: 20px;
  height: 20px;
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  background-color: #000;
}

/* 按钮样式 */

#start-button {
  width: 100px;
  height: 30px;
  position: absolute;
  top: 550px;
  left: 50%;
  transform: translate(-50%, -50%);
  border: 1px solid #ccc;
  border-radius: 5px;
  background-color: #000;
  color: #fff;
  font-size: 16px;
  cursor: pointer;
}

4. 创建 JavaScript 文件

JavaScript 为您的页面增添了交互性，使您可以创建动态效果和功能。创建一个新的 JavaScript 文件并添加以下代码：

// 转盘抽奖类

class Turntable {
  constructor(container) {
    this.container = container;
    this.turntable = this.container.querySelector('.turntable');
    this.turntableItems = this.turntable.querySelectorAll('.turntable-item');
    this.turntablePointer = this.container.querySelector('.turntable-pointer');
    this.startButton = this.container.querySelector('#start-button');

    this.init();
  }

  init() {
    this.startButton.addEventListener('click', () => {
      this.start();
    });
  }

  start() {
    this.turntable.classList.add('rotating');

    setTimeout(() => {
      this.turntable.classList.remove('rotating');
      this.stop();
    }, 3000);
  }

  stop() {
    const randomIndex = Math.floor(Math.random() * this.turntableItems.length);
    const randomItem = this.turntableItems[randomIndex];

    this.turntablePointer.style.transform = `translate(-50%, -50%) rotate(${randomIndex * 45}deg)`;

    alert(`恭喜您，您抽到了${randomItem.textContent}！`);
  }
}

// 创建转盘抽奖对象

const turntable = new Turntable(document.querySelector('.turntable-container'));