抽奖项目
代码
<!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 {
margin: 0;
padding: 20px;
background-color: #f5f5f5;
display: flex;
flex-direction: column;
align-items: center;
font-family: Arial, sans-serif;
}
.wheel-container {
width: 300px;
height: 300px;
position: relative;
margin: 20px 0;
}
.wheel {
width: 100%;
height: 100%;
border-radius: 50%;
border: 8px solid #ff6b6b;
position: relative;
overflow: hidden;
transition: transform 5s ease;
}
.section {
position: absolute;
width: 50%;
height: 50%;
transform-origin: bottom right;
}
.section span {
position: absolute;
width: 100px;
top: 50px;
left: 20px;
color: white;
font-weight: bold;
transform-origin: center;
}
.pointer {
position: absolute;
top: -15px;
left: 140px;
width: 0;
height: 0;
border-left: 15px solid transparent;
border-right: 15px solid transparent;
border-top: 30px solid #ff6b6b;
z-index: 10;
}
.center-btn {
position: absolute;
top: 120px;
left: 120px;
width: 60px;
height: 60px;
border-radius: 50%;
background-color: #ff6b6b;
border: 4px solid #ff4757;
color: white;
font-weight: bold;
cursor: pointer;
display: flex;
align-items: center;
justify-content: center;
z-index: 5;
}
#drawBtn {
padding: 10px 20px;
background-color: #48dbfb;
border: none;
border-radius: 5px;
color: white;
font-weight: bold;
cursor: pointer;
margin-top: 10px;
}
#drawBtn:disabled {
background-color: #b2bec3;
cursor: not-allowed;
}
.modal {
position: fixed;
top: 0;
left: 0;
width: 100%;
height: 100%;
background-color: rgba(0,0,0,0.7);
display: none;
align-items: center;
justify-content: center;
}
.modal-content {
background-color: white;
padding: 20px;
border-radius: 10px;
text-align: center;
width: 250px;
}
.modal button {
padding: 8px 15px;
background-color: #48dbfb;
border: none;
border-radius: 5px;
color: white;
cursor: pointer;
}
</style>
</head>
<body>
<div class="wheel-container">
<div class="wheel" id="wheel">
<div class="section" style="background-color: #ff9ff3; transform: rotate(0deg);">
<span style="transform: rotate(30deg);">一等奖</span>
</div>
<div class="section" style="background-color: #feca57; transform: rotate(60deg);">
<span style="transform: rotate(90deg);">二等奖</span>
</div>
<div class="section" style="background-color: #1dd1a1; transform: rotate(120deg);">
<span style="transform: rotate(150deg);">三等奖</span>
</div>
<div class="section" style="background-color: #54a0ff; transform: rotate(180deg);">
<span style="transform: rotate(210deg);">四等奖</span>
</div>
<div class="section" style="background-color: #5f27cd; transform: rotate(240deg);">
<span style="transform: rotate(270deg);">五等奖</span>
</div>
<div class="section" style="background-color: #ee5253; transform: rotate(300deg);">
<span style="transform: rotate(330deg);">参与奖</span>
</div>
</div>
<div class="pointer"></div>
<div class="center-btn" id="centerBtn">抽奖</div>
</div>
<button id="drawBtn">开始抽奖</button>
<div class="modal" id="resultModal">
<div class="modal-content">
<h3>恭喜您！</h3>
<p id="resultText">获得了一等奖！</p>
<button id="closeBtn">确定</button>
</div>
</div>
<script>
const wheel = document.getElementById('wheel');
const centerBtn = document.getElementById('centerBtn');
const drawBtn = document.getElementById('drawBtn');
const resultModal = document.getElementById('resultModal');
const resultText = document.getElementById('resultText');
const closeBtn = document.getElementById('closeBtn');
const prizes = ['一等奖', '二等奖', '三等奖', '四等奖', '五等奖', '参与奖'];
let isSpinning = false;
let rotation = 0;
centerBtn.addEventListener('click', startDraw);
drawBtn.addEventListener('click', startDraw);
closeBtn.addEventListener('click', () => {
resultModal.style.display = 'none';
});
function startDraw() {
if (isSpinning) return;
isSpinning = true;
centerBtn.textContent = '转动中';
drawBtn.disabled = true;
const randomRotate = 1080 + Math.floor(Math.random() * 1080);
rotation += randomRotate;
wheel.style.transform = `rotate(${rotation}deg)`;
setTimeout(() => {
const prizeIndex = getPrizeIndex();
resultText.textContent = `获得了${prizes[prizeIndex]}！`;
resultModal.style.display = 'flex';
isSpinning = false;
centerBtn.textContent = '抽奖';
drawBtn.disabled = false;
}, 5000);
}
function getPrizeIndex() {
const angle = rotation % 360;
const normalizedAngle = (360 - angle) % 360;
return Math.floor(normalizedAngle / 60);
}
</script>
</body>
</html>
实现
