在年会抽奖系统中，不同场景下的抽奖顺序需求可能会有所不同。例如：
- 随机抽取奖品，营造紧张感和未知性。
- 按奖品等级高到低的顺序抽取，提升活动的层次感。
- 按奖品等级低到高的顺序抽取，逐渐递进到高潮。
本文将探讨如何支持多种抽奖顺序并通过 localStorage 实现设置的持久化。
问题描述
当前的抽奖系统默认按奖品等级从高到低排序，不能灵活切换顺序。需要支持以下三种抽奖顺序：
- 随机顺序：打乱奖品列表，随机抽取。
- 等级高到低：先抽特别奖和高等级奖，后抽低等级奖。
- 等级低到高：先抽低等级奖，最后抽特别奖。
此外，为了提升用户体验，还需要在页面刷新或重新登录后记住用户选择的抽奖顺序。
解决方案
1. 添加抽奖顺序设置
我们可以通过 UI 提供用户选项，让用户选择抽奖顺序。例如：
<label>
<input type="radio" name="order" value="random" checked /> 随机顺序
</label>
<label>
<input type="radio" name="order" value="desc" /> 等级高到低
</label>
<label>
<input type="radio" name="order" value="asc" /> 等级低到高
</label>
2. 实现抽奖顺序逻辑
根据用户选择的顺序，动态排序奖品列表。以下是 JavaScript 实现代码：
// 奖品数据
const prizes = [
{ name: "三等奖", level: 1 },
{ name: "二等奖", level: 2 },
{ name: "一等奖", level: 3 },
{ name: "特别奖", level: 4 },
];
// 抽奖顺序设置（持久化到 localStorage）
function getDrawOrder() {
return localStorage.getItem("drawOrder") || "random"; // 默认随机
}
function setDrawOrder(order) {
localStorage.setItem("drawOrder", order);
}
// 排序逻辑
function sortPrizes(order, prizes) {
if (order === "random") {
return prizes.sort(() => Math.random() - 0.5); // 随机排序
} else if (order === "desc") {
return prizes.sort((a, b) => b.level - a.level); // 等级高到低
} else if (order === "asc") {
return prizes.sort((a, b) => a.level - b.level); // 等级低到高
}
return prizes;
}
// 获取用户选择的顺序
const userOrder = getDrawOrder();
// 排序奖品
const sortedPrizes = sortPrizes(userOrder, prizes);
console.log(sortedPrizes);
3. 用户设置持久化
当用户选择某种抽奖顺序时，我们将其存储到 localStorage 中，以便在页面刷新后仍能记住用户的选择。
// 绑定事件监听用户选择
document.querySelectorAll('input[name="order"]').forEach((input) => {
input.addEventListener("change", (e) => {
const selectedOrder = e.target.value;
setDrawOrder(selectedOrder); // 保存到 localStorage
const sortedPrizes = sortPrizes(selectedOrder, prizes); // 更新排序
console.log(sortedPrizes); // 调试输出
});
});
完整功能的演示效果
- 默认顺序（随机）
用户首次打开抽奖页面时，奖品顺序为随机。 - 用户选择某种排序规则后
奖品顺序会按照用户的选择展示，并立即生效。 - 页面刷新后
用户上次选择的抽奖顺序会自动加载，带来一致的使用体验。
扩展与优化
1. 支持更多抽奖规则
如果年会抽奖系统未来需要支持更复杂的规则，例如：
- 按奖品价值排序。
- 按奖品剩余数量动态调整优先级。
可以通过增加规则选项和对应的排序逻辑轻松扩展。
2. 动态更新奖品
在抽奖过程中，每次抽出一个奖品后，奖品列表应实时更新排序。可以在抽取逻辑中重新调用 sortPrizes：
function drawPrize() {
const remainingPrizes = sortedPrizes.shift(); // 抽出第一个奖品
console.log("抽中的奖品：", remainingPrizes);
console.log("剩余奖品：", sortPrizes(getDrawOrder(), sortedPrizes));
}
3. 改善用户体验
- 实时反馈：在用户选择排序规则时，奖品列表立即更新并展示。
- UI 美化：通过动画效果切换不同排序顺序，增加抽奖的互动感和趣味性。
总结
通过为年会抽奖系统添加抽奖顺序设置，用户可以自由选择随机、等级高到低、等级低到高等多种排序规则，并且借助 localStorage 实现了设置的持久化。
这一改进不仅提升了抽奖环节的灵活性和趣味性，还为用户提供了更贴心的体验。
在年会抽奖的实际场景中，排序逻辑的设计是细节决定体验的典型案例。希望本文的实现方案能为你的抽奖系统开发带来帮助！
