可直接用 localStorage 存储奖品列表（JSON格式），页面加载时读取，抽奖时随机抽取并更新显示——无需后端，配置灵活，刷新不丢失。
可以直接用 localStorage 存储奖品列表（JSON格式），页面加载时读取，抽奖时随机抽取并更新显示——无需后端，配置灵活，刷新不丢失。
奖品数据结构设计
推荐用数组形式存储，每项包含名称、权重（可选）、是否禁用等字段，便于后续扩展。例如：
[
{"name": "一等奖", "weight": 10, "enabled": true},
{"name": "二等奖", "weight": 30, "enabled": true},
{"name": "安慰奖", "weight": 60, "enabled": true}
]
权重用于加权随机抽奖；enabled 字段支持临时下架某奖项。
初始化与保存奖品配置
首次访问或管理员修改后，调用以下代码写入本地：
Article To Html
下载
文章转信息图。将文章/笔记转化为手机可读的 HTML 信息图，自动匹配视觉风格。触发场景：文章转图、笔记转图、信息图、转小红书图、做张图、可视化这篇文章、文生图。
立即学习“前端免费学习笔记（深入）”；
function savePrizes(prizeList) {
localStorage.setItem('lotteryPrizes', JSON.stringify(prizeList));
}
// 示例：设置默认奖品
savePrizes([
{name: "iPhone 15", enabled: true},
{name: "AirPods", enabled: true},
{name: "谢谢参与", enabled: true}
]);
- 务必用
JSON.stringify()转为字符串再存，否则会变成[object Object] - 建议封装成函数，方便在控制台或配置界面调用
- 可配合
prompt()或表单输入，让运营人员手动更新（简易版）
页面加载时读取并渲染奖品
在 <script> 中执行：
function loadPrizes() {
const data = localStorage.getItem('lotteryPrizes');
return data ? JSON.parse(data) : [];
}
const prizes = loadPrizes();
// 可选：动态生成配置预览（如显示在页面底部）
document.getElementById('prize-list').innerHTML =
prizes.map(p => `<div>${p.name} ${p.enabled ? '✅' : '❌'}</div>`).join('');
- 始终做空值判断，避免解析失败报错
- 读取后可直接用于抽奖逻辑，也可渲染到管理区域供核对
- 若需实时生效，可在抽奖按钮点击前重新读取一次
抽奖时使用本地配置
从 loadPrizes() 获取当前有效奖品（过滤 enabled: true），再随机选取：
function drawPrize() {
const activePrizes = loadPrizes().filter(p => p.enabled);
if (activePrizes.length === 0) return '暂无可用奖品';
const randomIndex = Math.floor(Math.random() * activePrizes.length);
return activePrizes[randomIndex].name;
}
// 点击抽奖按钮触发
document.getElementById('draw-btn').onclick = () => {
const result = drawPrize();
document.getElementById('result').textContent = result;
};
- 每次抽奖都重新读取，确保配置变更立即生效
- 如需加权抽奖，改用带权重的随机算法（如累积权重+二分查找）
- 可额外记录中奖历史到
localStorage，实现“已抽中奖品不再出现”逻辑
不复杂但容易忽略：记得在浏览器隐私模式或禁用 localStorage 时提供降级提示，比如弹出“请启用本地存储以使用抽奖功能”。
