HTML抽奖平台

bat_and_vbs

于 2025-06-29 17:39:16 发布

阅读量560

点赞数 15

CC 4.0 BY-SA版权

分类专栏： html 文章标签： html css

本文链接：https://blog.youkuaiyun.com/bat_and_vbs/article/details/149000734

html 专栏收录该内容

23 篇文章

订阅专栏

<!DOCTYPE html>

<html lang="zh-CN">

<head>

<meta charset="UTF-8">

<meta name="viewport" content="width=device-width, initial-scale=1.0">

<title>幸运抽奖平台</title>

<style>

body {

font-family: 'Microsoft YaHei', sans-serif;

background-color: #f5f5f5;

margin: 0;

padding: 20px;

display: flex;

flex-direction: column;

align-items: center;

}



.container {

background-color: white;

border-radius: 10px;

box-shadow: 0 0 20px rgba(0, 0, 0, 0.1);

padding: 30px;

width: 80%;

max-width: 800px;

text-align: center;

}



h1 {

color: #e74c3c;

margin-bottom: 30px;

}



.prize-display {

height: 200px;

border: 2px dashed #ddd;

border-radius: 8px;

display: flex;

justify-content: center;

align-items: center;

font-size: 24px;

margin-bottom: 20px;

background-color: #f9f9f9;

transition: all 0.3s;

}



.prize-display.active {

border-color: #e74c3c;

background-color: #fff9f9;

}



.prize-name {

font-size: 36px;

font-weight: bold;

color: #e74c3c;

}



.btn {

background-color: #e74c3c;

color: white;

border: none;

padding: 12px 30px;

font-size: 18px;

border-radius: 50px;

cursor: pointer;

transition: all 0.3s;

margin: 10px;

}



.btn:hover {

background-color: #c0392b;

transform: scale(1.05);

}



.btn:disabled {

background-color: #95a5a6;

cursor: not-allowed;

transform: none;

}



.settings {

margin: 30px 0;

text-align: left;

padding: 20px;

background-color: #f9f9f9;

border-radius: 8px;

}



textarea {

width: 100%;

height: 100px;

margin-bottom: 10px;

padding: 10px;

border-radius: 5px;

border: 1px solid #ddd;

}



.winners-list {

margin-top: 30px;

text-align: left;

}



.winner-item {

padding: 10px;

border-bottom: 1px solid #eee;

}



.history {

margin-top: 20px;

max-height: 200px;

overflow-y: auto;

border: 1px solid #ddd;

border-radius: 5px;

padding: 10px;

}

</style>

</head>

<body>

<div class="container">

<h1>🎉 幸运抽奖平台 🎉</h1>



<div class="settings">

<h3>奖品设置</h3>

<textarea id="prizes-input" placeholder="请输入奖品列表，每行一个奖品（例如：

一等奖 1名

二等奖 3名

三等奖 10名

参与奖若干"></textarea>

<button id="set-prizes-btn" class="btn">设置奖品</button>

</div>



<div class="prize-display" id="prize-display">

<div>点击下方按钮开始抽奖</div>

</div>



<div>

<button id="start-btn" class="btn" disabled>开始抽奖</button>

<button id="stop-btn" class="btn" disabled>停止</button>

<button id="reset-btn" class="btn">重置</button>

</div>



<div class="winners-list">

<h3>中奖名单</h3>

<div id="winners-container" class="history">



</div>

</div>

</div>

<script>

// 奖品数据

let prizes = [];

let winners = [];

let isDrawing = false;

let drawInterval;

let remainingPrizes = [];



// DOM元素

const prizeDisplay = document.getElementById('prize-display');

const startBtn = document.getElementById('start-btn');

const stopBtn = document.getElementById('stop-btn');

const resetBtn = document.getElementById('reset-btn');

const prizesInput = document.getElementById('prizes-input');

const setPrizesBtn = document.getElementById('set-prizes-btn');

const winnersContainer = document.getElementById('winners-container');



// 设置奖品

setPrizesBtn.addEventListener('click', function() {

const input = prizesInput.value.trim();

if (!input) {

alert('请输入奖品列表！');

return;

}



prizes = parsePrizes(input);

remainingPrizes = [...prizes];

updatePrizeStatus();

startBtn.disabled = false;



alert(`成功设置 ${prizes.length} 个奖品！`);

});



// 开始抽奖

startBtn.addEventListener('click', function() {

if (remainingPrizes.length === 0) {

alert('所有奖品已抽完！');

return;

}



isDrawing = true;

prizeDisplay.classList.add('active');

startBtn.disabled = true;

stopBtn.disabled = false;



// 随机滚动效果

drawInterval = setInterval(function() {

const randomIndex = Math.floor(Math.random() * remainingPrizes.length);

const currentPrize = remainingPrizes[randomIndex];

prizeDisplay.innerHTML = `<div class="prize-name">${currentPrize.name}</div>`;

}, 100);

});



// 停止抽奖

stopBtn.addEventListener('click', function() {

if (!isDrawing) return;



clearInterval(drawInterval);

isDrawing = false;

prizeDisplay.classList.remove('active');

stopBtn.disabled = true;

startBtn.disabled = false;



// 确定中奖者

const randomIndex = Math.floor(Math.random() * remainingPrizes.length);

const winnerPrize = remainingPrizes[randomIndex];



// 更新剩余奖品

winnerPrize.count--;

if (winnerPrize.count <= 0) {

remainingPrizes = remainingPrizes.filter(p => p !== winnerPrize);

}



// 记录中奖者

const winner = {

prize: winnerPrize.name,

time: new Date().toLocaleString()

};

winners.push(winner);



// 显示中奖信息

prizeDisplay.innerHTML = `

<div>

<div style="font-size: 24px; margin-bottom: 10px;">恭喜获得</div>

<div class="prize-name">${winnerPrize.name}</div>

</div>

`;



// 更新中奖名单

updateWinnersList();

updatePrizeStatus();

});



// 重置

resetBtn.addEventListener('click', function() {

clearInterval(drawInterval);

isDrawing = false;

prizeDisplay.classList.remove('active');

prizeDisplay.innerHTML = '<div>点击下方按钮开始抽奖</div>';

startBtn.disabled = remainingPrizes.length === 0;

stopBtn.disabled = true;



// 重置奖品和获奖者

prizes = [];

remainingPrizes = [];

winners = [];

winnersContainer.innerHTML = '';

prizesInput.value = '';

});



// 解析奖品输入

function parsePrizes(input) {

const lines = input.split('\n').filter(line => line.trim() !== '');

const prizeList = [];



for (const line of lines) {

const parts = line.trim().split(/\s+/);

if (parts.length < 2) continue;



const count = parseInt(parts[parts.length - 1].replace('名', '').replace('若干', '999'));

if (isNaN(count)) continue;



const name = parts.slice(0, parts.length - 1).join(' ');

prizeList.push({ name, count });

}



return prizeList;

}



// 更新中奖名单

function updateWinnersList() {

winnersContainer.innerHTML = winners.map(winner => `

<div class="winner-item">

<strong>${winner.prize}</strong> - ${winner.time}

</div>

`).join('');

}



// 更新奖品状态

function updatePrizeStatus() {

console.log('剩余奖品:', remainingPrizes);

}

</script>

</body>

</html>