转盘抽奖活动

2023-12-03 14:10:15

转盘抽奖活动带跑马灯的实现详解

什么是转盘抽奖活动带跑马灯？

转盘抽奖活动是一种常见的营销策略，它使用一个带有不同奖品的转盘来随机决定获奖者。而跑马灯则是一种动态文本显示效果，通常用于显示最新消息或公告。将转盘抽奖活动与跑马灯相结合，可以创造一种引人入胜且互动的体验，吸引更多参与者并增加活动效果。

实现转盘抽奖活动带跑马灯的步骤

1. 创建一个HTML页面

<!DOCTYPE html>
<html>
<head>
  
  <link rel="stylesheet" href="style.css">
  <script src="script.js"></script>
</head>
<body>
  <div id="turntable-container">
    <canvas id="turntable"></canvas>
    <div id="start-button">开始抽奖</div>
  </div>
  <div id="marquee-container">
    <ul id="marquee">
      <li>获奖者：无</li>
      <li>奖品：无</li>
    </ul>
  </div>
</body>
</html>

2. 创建一个CSS样式表

#turntable-container {
  width: 500px;
  height: 500px;
  position: relative;
}

#turntable {
  position: absolute;
  top: 0;
  left: 0;
  width: 500px;
  height: 500px;
}

#start-button {
  position: absolute;
  top: 200px;
  left: 200px;
  width: 100px;
  height: 50px;
  background-color: #00FF00;
  color: #FFFFFF;
  font-size: 20px;
  border: none;
  cursor: pointer;
}

#marquee-container {
  width: 500px;
  height: 100px;
  position: absolute;
  top: 500px;
  left: 0;
  overflow: hidden;
}

#marquee {
  width: 500px;
  height: 100px;
  list-style-type: none;
  padding: 0;
  margin: 0;
  animation: marquee 10s linear infinite;
}

#marquee li {
  display: inline-block;
  width: 500px;
  height: 100px;
  line-height: 100px;
  text-align: center;
  font-size: 20px;
  color: #000000;
}

@keyframes marquee {
  0% {
    transform: translateX(0);
  }
  100% {
    transform: translateX(-500px);
  }
}

3. 创建一个JavaScript脚本

const canvas = document.getElementById('turntable');
const ctx = canvas.getContext('2d');

const startButton = document.getElementById('start-button');
const marquee = document.getElementById('marquee');
const marqueeLi = marquee.getElementsByTagName('li');

const prizes = ['一等奖', '二等奖', '三等奖', '四等奖', '五等奖', '六等奖'];

let startAngle = 0;
let endAngle = 0;
let angle = 0;
let rotateAngle = 0;
let isRotating = false;

const drawTurntable = () => {
  ctx.clearRect(0, 0, canvas.width, canvas.height);

  ctx.beginPath();
  ctx.arc(canvas.width / 2, canvas.height / 2, canvas.width / 2, 0, 2 * Math.PI, false);
  ctx.fillStyle = '#FFFFFF';
  ctx.fill();

  ctx.beginPath();
  ctx.arc(canvas.width / 2, canvas.height / 2, canvas.width / 2 - 50, 0, 2 * Math.PI, false);
  ctx.fillStyle = '#000000';
  ctx.fill();

  for (let i = 0; i < prizes.length; i++) {
    startAngle = 2 * Math.PI / prizes.length * i;
    endAngle = 2 * Math.PI / prizes.length * (i + 1);

    ctx.beginPath();
    ctx.arc(canvas.width / 2, canvas.height / 2, canvas.width / 2 - 50, startAngle, endAngle, false);
    ctx.strokeStyle = '#FF0000';
    ctx.lineWidth = 10;
    ctx.stroke();

    ctx.fillStyle = '#FFFFFF';
    ctx.font = '20px Arial';
    ctx.textAlign = 'center';
    ctx.textBaseline = 'middle';
    ctx.fillText(prizes[i], canvas.width / 2, canvas.height / 2 + 10);
  }
};

const startRotating = () => {
  isRotating = true;

  angle = 0;
  rotateAngle = Math.random() * 10 + 10;

  requestAnimationFrame(rotateTurntable);
};

const rotateTurntable = () => {
  if (isRotating) {
    angle += rotateAngle;

    ctx.clearRect(0, 0, canvas.width, canvas.height);
    drawTurntable();

    ctx.save();
    ctx.translate(canvas.width / 2, canvas.height / 2);
    ctx.rotate(angle * Math.PI / 180);
    ctx.fillStyle = '#000000';
    ctx.fillRect(-10, -10, 20, 20);
    ctx.restore();

    requestAnimationFrame(rotateTurntable);
  }
};

const stopRotating = () => {
  isRotating = false;

  const prizeIndex = Math.floor(angle / (360 / prizes.length));

  marqueeLi[0].innerHTML = '获奖者：' + prizes[prizeIndex];
  marqueeLi[1].innerHTML = '奖品：' + prizes[prizeIndex];

  marquee.style.animation = 'marquee 10s linear infinite';
};

startButton.addEventListener('click', startRotating);
canvas.addEventListener('click', stopRotating);

drawTurntable();