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); } 

实现