当前位置：首页 > article >正文

蓝桥杯，冬奥大抽奖

article 2025/3/26 22:09:45

在日常的网页开发中，抽奖功能是一种常见的交互设计，它可以增加用户的参与感和趣味性。今天，我将分享一个简单的抽奖转盘实现，它使用了HTML、CSS和JavaScript，非常适合初学者学习和理解前端开发的基本概念。

一、项目背景

抽奖转盘是一种常见的互动形式，尤其在活动页面中经常出现。它可以吸引用户参与，增加页面的趣味性和互动性。通过实现一个简单的抽奖转盘，我们可以学习到前端开发中的一些基本技能，例如HTML的结构设计、CSS的样式布局以及JavaScript的事件处理和动画效果实现。

二、HTML结构设计

HTML是网页的骨架，它定义了页面的结构。在这个抽奖转盘项目中，我们使用了以下HTML代码：

<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8" />
    <title>冬奥大抽奖</title>
    <style>
        /* 样式部分 */
    </style>
</head>
<body>
    <p id="award"></p>
    <div class="ul">
        <li class="li1">洗衣机</li>
        <li class="li2">蓝桥抱枕</li>
        <li class="li3">蓝桥公仔</li>
        <li class="li8">冰墩墩</li>
        <li id="start">开始</li>
        <li class="li4">雪融融</li>
        <li class="li7">html5进阶</li>
        <li class="li6">钥匙扣</li>
        <li class="li5">会员15天</li>
    </div>
    <script>
        // JavaScript部分
    </script>
</body>
</html>

三、CSS样式设计

CSS负责网页的外观和布局。在这个项目中，我们使用了以下CSS代码来美化抽奖转盘：

/* 1. 转盘容器样式 */
/**
*使用flex布局，使奖品项水平排列，且在页面中心显示。
flex-wrap: wrap允许奖品项换行排列。
position: relative和transform: translate(-50%, 50%)将转盘容器定位到页面的中心位置。
**/
.ul {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  width: 400px;
  height: 380px;
  position: relative;
  left: 50%;
  top: 50%;
  transform: translate(-50%, 50%);
}

/* 2. 奖品项样式 */
/**
*
每个奖品项的宽度和高度均为110px。
margin: 10px为每个奖品项添加外边距，使它们之间有间隔。
list-style: none移除了<li>元素的默认列表样式。
line-height: 100px和text-align: center使奖品名称在奖品项中垂直和水平居中。
border-radius: 10px为奖品项添加圆角效果。
cursor: pointer将鼠标指针变为手形，表示这些奖品项可以被点击（虽然在这个项目中我们主要通过“开始”按钮进行操作）。
背景使用了线性渐变色，从浅蓝色到深蓝色，使转盘看起来更美观。
text-shadow为文字添加阴影效果，增强视觉效果。
color: #ffffff将文字颜色设置为白色，使其在蓝色背景上清晰可见。
**/
li {
  width: 110px;
  height: 110px;
}

.ul li {
  box-sizing: border-box;
  margin: 10px;
  list-style: none;
  line-height: 100px;
  text-align: center;
  font-size: 20px;
  border-radius: 10px;
  cursor: pointer;
  background: linear-gradient(90deg, #72a8f8 0%, #3e93d3 50%, #5385e2 100%);
  text-shadow: 5px 5px 5px #1004ad;
  color: #ffffff;
}
/* 3. “开始”按钮样式 */
#start {
  background: #1004ad;
}
/* 4. 高亮显示的奖品样式 */
.ul li.active {
  background: rgb(255, 153, 0);
  color: #ffffff;
}

/* 5. 中奖结果显示样式 */
/**
*
中奖结果显示区域的样式设计使其在页面顶部中央显示。
position: absolute和transform: translateX(-50%)确保它水平居中。
top: 100px将其定位在页面顶部距离100像素的位置。
背景颜色为白色，带有轻微的阴影效果，使其在页面上更加突出。
letter-spacing: 2px增加了文字的间距，使显示更加美观。
line-height: 40px确保文字在显示区域内垂直居中。
**/
#award {
  position: absolute;
  left: 50%;
  transform: translateX(-50%);
  top: 100px;
  display: block;
  width: 320px;
  height: 40px;
  background-color: rgb(255, 255, 255);
  border-radius: 2px;
  box-shadow: rgba(0, 0, 0, 0.3) 0 0 3px 2px;
  letter-spacing: 2px;
  text-align: center;
  line-height: 40px;
}

四、JavaScript逻辑实现


 let rollTime; // 定义定时器变量用来清除定时器
let time = 0; // 转动次数
let speed = 300; // 转动时间间隔
let times; // 总转动次数

// 开始按钮点击事件后开始抽奖
document.querySelector("#start").addEventListener("click", function () {
  document.querySelector("#award").innerHTML=""; //清空中奖信息
  times = parseInt(Math.random() * (20 - 30 + 1) + 20, 10); // 定义总转动次数，随机20-30次
  rolling();
});

function setActive(i) {
  removeActive();
  let a = document.querySelector(`.li${i}`);
  a.classList.add("active");
}

function removeActive() {
  let lis = document.querySelectorAll("li");
  lis.forEach((item, index) => {
    if (item.classList.contains("active")) {
      item.classList.remove("active");
    }
  });
}
// TODO：请完善此函数
function rolling() {
  time++; // 转动次数加1]
  let index = time % 8 == 0 ? 8 : time % 8;
  setActive(index);
  let value = document.querySelector(`.li${index}`).textContent;
  clearTimeout(rollTime);
  rollTime = setTimeout(() => {
    window.requestAnimationFrame(rolling); // 进行递归动画
  }, speed);

  // time > times 转动停止
  if (time > times) {
    clearInterval(rollTime);
    document.querySelector("#award").innerHTML=value; //清空中奖信息
    time = 0;
    return;
  }
}

setActive(i)函数用于设置第i个奖品为高亮状态。
- 先调用removeActive()移除所有奖品的高亮状态。
- 然后通过querySelector找到对应的奖品项，并为其添加active类，使其背景颜色变为橙色。
removeActive()函数用于移除所有奖品的高亮状态，遍历所有<li>元素，检查它们是否包含active类，如果有则移除。
time++：每次调用rolling()函数时，转动次数time加1。
index = time % 8 == 0 ? 8 : time % 8：计算当前高亮显示的奖品索引。因为有8个奖品，所以用time对8取余数。如果余数为0，表示转到了最后一个奖品。
setActive(index)：设置当前索引对应的奖品为高亮状态。
value = document.querySelector(.li${index}).textContent：获取当前高亮奖品的文本内容。
clearTimeout(rollTime)：清除之前的定时器，防止多个定时器同时运行。
rollTime = setTimeout(() => { window.requestAnimationFrame(rolling); }, speed)：设置一个新的定时器，延迟speed毫秒后再次调用rolling()函数，实现递归动画效果。
如果time > times，表示转盘已经转动了足够的次数，应该停止转动：
- clearInterval(rollTime)：清除定时器。
- document.querySelector("#award").innerHTML=value：将中奖结果显示在#award元素中。
- time = 0：重置转动次数。
- return：退出函数。