HTML第三次作业 - 详解

抽奖项目

代码

简易抽奖转盘
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;
}
一等奖
二等奖
三等奖
四等奖
五等奖
参与奖
抽奖
恭喜您！
获得了一等奖！
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);
}

实现