使用纯CSS和JavaScript来实现一个转盘抽奖效果,抽到机率相同
<!DOCTYPE html>
<html lang="zh"><head><meta charset="UTF-8" /><meta name="viewport" content="width=device-width, initial-scale=1.0" /><title>转盘抽奖</title><style>body {display: flex;justify-content: center;align-items: center;height: 100vh;margin: 0;background-color: #f7f7f7;}.container {position: relative;width: 300px;height: 300px;}/* 轮盘容器 */.wheel {width: 100%;height: 100%;border-radius: 50%;border: 5px solid #333;position: relative;overflow: hidden;transform: rotate(-36deg);transition: transform 5s ease-out;}/* 使用 clip-path 切分成10个扇形，并设置z-index */.wheel div {position: absolute;width: 100%;height: 100%;clip-path: polygon(50% 50%, 87% -3%, 100% 33%);transform-origin: 50% 50%;z-index: 1;}/* 设置每个扇形区域的颜色和旋转角度 */.wheel div:nth-child(1) {background-color: #f39c12;transform: rotate(0deg);}.wheel div:nth-child(2) {background-color: #e74c3c;transform: rotate(36deg);}.wheel div:nth-child(3) {background-color: #8e44ad;transform: rotate(72deg);}.wheel div:nth-child(4) {background-color: #3498db;transform: rotate(108deg);}.wheel div:nth-child(5) {background-color: #1abc9c;transform: rotate(144deg);}.wheel div:nth-child(6) {background-color: #27ae60;transform: rotate(180deg);}.wheel div:nth-child(7) {background-color: #f1c40f;transform: rotate(216deg);}.wheel div:nth-child(8) {background-color: #2ecc71;transform: rotate(252deg);}.wheel div:nth-child(9) {background-color: #e67e22;transform: rotate(288deg);}.wheel div:nth-child(10) {background-color: #c0392b;transform: rotate(324deg);}/* 奖项名称的显示 */.wheel div span {position: absolute;top: 50%;left: 50%;transform: translate(150%, -380%) rotate(-45deg);font-size: 12px;color: #fff;text-align: center;}/* 指针样式 */.pointer {position: absolute;top: 50%;left: 50%;width: 0;height: 0;border-left: 4px solid transparent;border-right: 4px solid transparent;border-bottom: 130px solid #333;transform: translate(4%, -96%);transform-origin: bottom center; /* 将旋转中心点移到指针底部 */z-index: 10;}button {width: 100px;height: 32px;border-radius: 20px;margin-top: 40px;}</style></head><body><div style="display: flex; flex-direction: column; align-items: center"><div class="container"><div class="wheel" id="wheel"><div><span>一等奖</span></div><div><span>二等奖</span></div><div><span>三等奖</span></div><div><span>四等奖</span></div><div><span>五等奖</span></div><div><span>六等奖</span></div><div><span>七等奖</span></div><div><span>八等奖</span></div><div><span>九等奖</span></div><div><span>十等奖</span></div></div><div class="pointer"></div></div><button onclick="spinPointer()">开始抽奖</button></div><script>let spinning = falsefunction spinPointer() {if (spinning) returnspinning = trueconst pointer = document.querySelector('.pointer')const randomDegree = Math.floor(Math.random() * 360) // 随机角度const finalDegree = 360 * 3 + randomDegree // 确保指针至少旋转3圈// 旋转指针pointer.style.transition = 'transform 2s ease-out'pointer.style.transform = `translate(4%, -96%) rotate(${finalDegree}deg)`setTimeout(() => {spinning = falseconst resultDegree = randomDegree % 360 // 获取最终位置console.log(resultDegree, randomDegree, 'randomDegree')alert(`抽到的奖项是：${getResult(resultDegree)}`)}, 2000) // 2秒后显示结果}function getResult(degree) {const segmentDegrees = 360 / 10 // 每个扇形的度数const index =Math.floor((degree + segmentDegrees / 2) / segmentDegrees) % 10 // 计算对应的奖项索引const awards = ['一等奖','二等奖','三等奖','四等奖','五等奖','六等奖','七等奖','八等奖','九等奖','十等奖']return awards[index]}</script></body>
</html>
