蓝桥杯，冬奥大抽奖

在日常的网页开发中，抽奖功能是一种常见的交互设计，它可以增加用户的参与感和趣味性。今天，我将分享一个简单的抽奖转盘实现，它使用了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逻辑实现

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：退出函数。