console
<!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>
:root {
--primary-color: #4a6bdf;
--secondary-color: #f5f7ff;
--accent-color: #ff6b6b;
--text-color: #333;
--light-text: #777;
--border-color: #e0e0e0;
--shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
}
* {
box-sizing: border-box;
margin: 0;
padding: 0;
font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
}
body {
background-color: #f9fafc;
color: var(--text-color);
line-height: 1.6;
padding: 20px;
}
.container {
max-width: 800px;
margin: 0 auto;
padding: 30px;
background-color: white;
border-radius: 12px;
box-shadow: var(--shadow);
}
h1 {
text-align: center;
margin-bottom: 30px;
color: var(--primary-color);
font-weight: 600;
}
.input-section {
margin-bottom: 30px;
}
label {
display: block;
margin-bottom: 8px;
font-weight: 500;
color: var(--text-color);
}
textarea {
width: 100%;
height: 200px;
padding: 15px;
border: 1px solid var(--border-color);
border-radius: 8px;
resize: vertical;
font-size: 14px;
transition: border 0.3s;
}
textarea:focus {
outline: none;
border-color: var(--primary-color);
box-shadow: 0 0 0 2px rgba(74, 107, 223, 0.2);
}
.controls {
display: flex;
gap: 15px;
margin-top: 20px;
flex-wrap: wrap;
}
.input-group {
flex: 1;
min-width: 200px;
}
input[type="number"] {
width: 100%;
padding: 12px 15px;
border: 1px solid var(--border-color);
border-radius: 8px;
font-size: 16px;
}
input[type="number"]:focus {
outline: none;
border-color: var(--primary-color);
box-shadow: 0 0 0 2px rgba(74, 107, 223, 0.2);
}
.buttons {
display: flex;
gap: 15px;
margin-top: 25px;
flex-wrap: wrap;
}
button {
padding: 12px 24px;
border: none;
border-radius: 8px;
font-size: 16px;
font-weight: 500;
cursor: pointer;
transition: all 0.3s;
flex: 1;
min-width: 120px;
}
.primary-btn {
background-color: var(--primary-color);
color: white;
}
.primary-btn:hover {
background-color: #3a5bd9;
transform: translateY(-2px);
}
.secondary-btn {
background-color: var(--secondary-color);
color: var(--primary-color);
border: 1px solid var(--border-color);
}
.secondary-btn:hover {
background-color: #e6eaf9;
transform: translateY(-2px);
}
.accent-btn {
background-color: var(--accent-color);
color: white;
}
.accent-btn:hover {
background-color: #e05a5a;
transform: translateY(-2px);
}
.result-section {
margin-top: 40px;
display: none;
}
.result-section h2 {
color: var(--primary-color);
margin-bottom: 20px;
text-align: center;
}
.winners-container {
display: grid;
grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
gap: 15px;
margin-bottom: 30px;
}
.winner-card {
background-color: var(--secondary-color);
border-radius: 8px;
padding: 20px;
text-align: center;
animation: fadeIn 0.5s ease-out;
box-shadow: 0 2px 8px rgba(0, 0, 0, 0.05);
border-left: 4px solid var(--primary-color);
}
.winner-card.highlight {
animation: pulse 1.5s infinite;
background-color: #e8f4ff;
}
@keyframes fadeIn {
from { opacity: 0; transform: translateY(20px); }
to { opacity: 1; transform: translateY(0); }
}
@keyframes pulse {
0% { transform: scale(1); box-shadow: 0 0 0 0 rgba(74, 107, 223, 0.4); }
70% { transform: scale(1.02); box-shadow: 0 0 0 10px rgba(74, 107, 223, 0); }
100% { transform: scale(1); box-shadow: 0 0 0 0 rgba(74, 107, 223, 0); }
}
.error-message {
color: var(--accent-color);
text-align: center;
margin: 20px 0;
font-weight: 500;
display: none;
}
.draw-animation {
position: fixed;
top: 0;
left: 0;
width: 100%;
height: 100%;
background-color: rgba(255, 255, 255, 0.9);
display: flex;
justify-content: center;
align-items: center;
z-index: 100;
flex-direction: column;
display: none;
}
.draw-animation h3 {
color: var(--primary-color);
margin-bottom: 20px;
font-size: 24px;
}
.spinner {
width: 50px;
height: 50px;
border: 5px solid rgba(74, 107, 223, 0.2);
border-radius: 50%;
border-top-color: var(--primary-color);
animation: spin 1s ease-in-out infinite;
}
@keyframes spin {
to { transform: rotate(360deg); }
}
@media (max-width: 600px) {
.container {
padding: 20px;
}
.controls {
flex-direction: column;
}
.input-group {
width: 100%;
}
.winners-container {
grid-template-columns: 1fr;
}
}
</style>
</head>
<body>
<div class="container">
<h1>�� 幸运抽奖系统 ��</h1>
<div class="input-section">
<label for="participants">参与抽奖人员名单（每行一个名字）：</label>
<textarea id="participants" placeholder="请输入参与抽奖的人员名单，每行一个名字..."></textarea>
<div class="controls">
<div class="input-group">
<label for="winner-count">抽取人数：</label>
<input type="number" id="winner-count" min="1" max="100" value="1">
</div>
</div>
<div class="buttons">
<button id="draw-btn" class="primary-btn">开始抽奖</button>
</div>
</div>
<div id="error-message" class="error-message"></div>
<div id="result-section" class="result-section">
<h2>�� 中奖名单 ��</h2>
<div id="winners-container" class="winners-container"></div>
<div class="buttons">
<button id="copy-btn" class="secondary-btn">复制结果</button>
<button id="reset-btn" class="accent-btn">重新抽奖</button>
</div>
</div>
</div>
<div id="draw-animation" class="draw-animation">
<h3>正在抽奖中...</h3>
<div class="spinner"></div>
</div>
<script>
document.addEventListener('DOMContentLoaded', function() {
const participantsTextarea = document.getElementById('participants');
const winnerCountInput = document.getElementById('winner-count');
const drawBtn = document.getElementById('draw-btn');
const resultSection = document.getElementById('result-section');
const winnersContainer = document.getElementById('winners-container');
const copyBtn = document.getElementById('copy-btn');
const resetBtn = document.getElementById('reset-btn');
const errorMessage = document.getElementById('error-message');
const drawAnimation = document.getElementById('draw-animation');
winnerCountInput.addEventListener('input', function() {
const participants = getParticipants();
if (participants.length > 0) {
this.max = participants.length;
if (parseInt(this.value) > participants.length) {
this.value = participants.length;
}
}
});
drawBtn.addEventListener('click', function() {
startDraw();
});
copyBtn.addEventListener('click', function() {
copyResults();
});
resetBtn.addEventListener('click', function() {
resetDraw();
});
function getParticipants() {
const text = participantsTextarea.value.trim();
if (!text) return [];
return text.split('\n')
.map(name => name.trim())
.filter(name => name.length > 0);
}
function startDraw() {
errorMessage.style.display = 'none';
const participants = getParticipants();
const winnerCount = parseInt(winnerCountInput.value);
if (participants.length === 0) {
showError('请输入参与抽奖的人员名单！');
return;
}
if (isNaN(winnerCount) {
showError('请输入有效的抽取人数！');
return;
}
if (winnerCount < 1) {
showError('抽取人数必须大于0！');
return;
}
if (winnerCount > participants.length) {
showError(`抽取人数不能超过总人数 ${participants.length}！`);
return;
}
drawAnimation.style.display = 'flex';
setTimeout(() => {
drawWinners(participants, winnerCount);
drawAnimation.style.display = 'none';
}, 1500);
}
function drawWinners(participants, winnerCount) {
const pool = [...participants];
const winners = [];
for (let i = 0; i < winnerCount; i++) {
if (pool.length === 0) break;
const randomIndex = Math.floor(Math.random() * pool.length);
winners.push(pool[randomIndex]);
pool.splice(randomIndex, 1);
}
displayResults(winners);
}
function displayResults(winners) {
winnersContainer.innerHTML = '';
winners.forEach((winner, index) => {
const winnerCard = document.createElement('div');
winnerCard.className = 'winner-card';
if (index === 0) winnerCard.classList.add('highlight');
winnerCard.textContent = winner;
winnersContainer.appendChild(winnerCard);
});
resultSection.style.display = 'block';
resultSection.scrollIntoView({ behavior: 'smooth' });
}
function copyResults() {
const winnerCards = document.querySelectorAll('.winner-card');
if (winnerCards.length === 0) return;
const winnersText = Array.from(winnerCards)
.map(card => card.textContent)
.join('\n');
navigator.clipboard.writeText(winnersText)
.then(() => {
const originalText = copyBtn.textContent;
copyBtn.textContent = '已复制！';
setTimeout(() => {
copyBtn.textContent = originalText;
}, 2000);
})
.catch(err => {
console.error('复制失败:', err);
});
}
function resetDraw() {
resultSection.style.display = 'none';
errorMessage.style.display = 'none';
}
function showError(message) {
errorMessage.textContent = message;
errorMessage.style.display = 'block';
resultSection.style.display = 'none';
errorMessage.scrollIntoView({ behavior: 'smooth' });
}
});
</script>
</body>
</html>