当前位置：首页 > news >正文

HTML第三次作业

news 2025/8/15 11:28:22

抽奖项目

代码

<!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>

实现