js实现随机竖直抽奖大屏

JavaScript实现随机竖直抽奖大屏通常涉及到HTML、CSS以及JavaScript的结合。下面是一个简单的步骤概述：

1. **HTML结构**：
- 创建一个大屏幕容器（例如`<div>`），设置高度和宽度作为屏幕尺寸，并添加必要的滚动条。

<div id="screen" style="height: 100vh; width: 100%; overflow-y: auto;"></div>

2. **CSS样式**：
- 配置滚动效果和动画，比如设置背景颜色，透明度渐变等。

#screen {
  background-color: rgba(0, 0, 0, 0.5);
  display: flex;
  justify-content: center;
  align-items: center;
  height: 100%;
  transition: opacity 0.5s ease;
}

3. **JavaScript逻辑**：
- 创建抽奖数据数组，包含奖项和对应的奖品信息。
- 定义一个函数，用于生成随机行数，每行显示一个奖项。
- 每次滚动到屏幕底部时，更新显示的奖项。

const prizes = [
  { name: '一等奖', prize: '大奖X' },
  // ... 其他奖项...
];

function drawPrize() {
  const randomRow = Math.floor(Math.random() * prizes.length);
  const prizeElement = document.createElement('p');
  prizeElement.textContent = `恭喜获得：${prizes[randomRow].name}`;
  screen.appendChild(prizeElement); // 或者使用其他动画效果插入
}

window.addEventListener('scroll', function() {
  if (window.innerHeight + window.scrollY >= document.body.offsetHeight) {
    drawPrize();
  }
});

// 初始化一次，展示第一轮奖项
drawPrize();