夜雨聆风
圆盘抽奖网页工具源码分享,轻松实现幸运转盘抽奖
‘圆盘抽奖”小工具
“圆盘抽奖”工具在生活中很常见，出现的场合也非常多，比如课堂、研讨会、或者公司年会上的抽奖环节。
现在分享一下随机点名小工具的网页源码（需要注意的是，网页工具在使用时依赖于稳定的网络环境）。感兴趣的同仁可以将源码直接复制到文本文档中，进一步文本文档的文件属性.txt改成网页属性后缀.html，即可保存使用。当然你也可以根据自己的需要修改一下奖品的名字。
<!DOCTYPE html><htmllang="zh-CN"><head><metacharset="UTF-8"><metaname="viewport"content="width=device-width, initial-scale=1.0"><title>圆盘抽奖</title><style>body {font-family: 'Arial Rounded MT Bold', 'Arial', sans-serif;background-color: #fff5f7;display: flex;flex-direction: column;align-items: center;justify-content: center;height: 100vh;margin: 0;overflow: hidden;background-image: url(data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" width="100" height="100" viewBox="0 0 100 100"><circle cx="50" cy="50" r="45" fill="none" stroke="%23ffc0cb" stroke-width="2"/><text x="50" y="50" font-size="10" text-anchor="middle" fill="%23ffc0cb">★</text></svg>);background-size: 50px 50px;}.container {text-align: center;}h1 {color: #ff69b4;margin-bottom: 30px;text-shadow: 2px 2px 4px rgba(255, 105, 180, 0.3);}.wheel-container {position: relative;width: 400px;height: 400px;margin: 0 auto 30px;}.wheel {width: 100%;height: 100%;border-radius: 50%;background: conic-gradient(#ffb6c1 0% 16.666%,#ff69b4 16.666% 33.332%,#ffc0cb 33.332% 49.998%,#ff1493 49.998% 66.664%,#ffb6c1 66.664% 83.33%,#ff69b4 83.33% 100%);transition: transform 3s cubic-bezier(0.17, 0.67, 0.88, 1.25);box-shadow: 0 0 20px rgba(255, 105, 180, 0.5);position: relative;overflow: hidden;}.wheel::after {content: '';position: absolute;top: 50%;left: 50%;transform: translate(-50%, -50%);width: 40px;height: 40px;background-color: #ff69b4;border-radius: 50%;box-shadow: inset 0 0 10px rgba(0, 0, 0, 0.3);z-index: 1;}.pointer {position: absolute;top: -50px;left: 50%;transform: translateX(-50%);width: 0;height: 0;border-left: 25px solid transparent;border-right: 25px solid transparent;border-bottom: 50px solid #ff69b4;z-index: 2;}.prize-text {position: absolute;width: 100px;height: 40px;font-size: 14px;color: white;text-align: center;line-height: 40px;transform-origin: 200px 200px;z-index: 1;}.btn {background-color: #ff69b4;color: white;border: none;padding: 15px 30px;font-size: 18px;border-radius: 30px;cursor: pointer;box-shadow: 0 4px 8px rgba(255, 105, 180, 0.4);transition: all 0.3s ease;margin-top: 20px;}.btn:hover {background-color: #ff1493;transform: translateY(-2px);box-shadow: 0 6px 12px rgba(255, 20, 147, 0.5);}.btn:active {transform: translateY(0);box-shadow: 0 2px 4px rgba(255, 20, 147, 0.3);}.result {margin-top: 20px;font-size: 20px;color: #ff69b4;font-weight: bold;height: 30px;text-shadow: 1px 1px 2px rgba(0, 0, 0, 0.1);}.prizes {display: flex;justify-content: space-around;width: 400px;margin-top: 20px;}.prize-item {text-align: center;}.prize-icon {width: 50px;height: 50px;background-color: #ffb6c1;border-radius: 10px;display: flex;align-items: center;justify-content: center;margin: 0 auto 5px;box-shadow: 0 2px 5px rgba(0, 0, 0, 0.1);}.prize-name {font-size: 12px;color: #ff69b4;}</style></head><body><divclass="container"><h1>幸运抽奖转盘</h1><divclass="wheel-container"><divclass="pointer"></div><divclass="wheel"id="wheel"><divclass="prize-text"style="transform:rotate(30deg) translateX(130px);">免作业卡</div><divclass="prize-text"style="transform:rotate(90deg) translateX(130px);">免罚卡</div><divclass="prize-text"style="transform:rotate(150deg) translateX(130px);">指定座位卡</div><divclass="prize-text"style="transform:rotate(210deg) translateX(130px);">班长体验卡</div><divclass="prize-text"style="transform:rotate(270deg) translateX(130px);">棒棒糖</div><divclass="prize-text"style="transform:rotate(330deg) translateX(130px);">鸡腿</div></div></div><divclass="result"id="result">点击按钮开始抽奖</div><buttonclass="btn"id="spinBtn">开始抽奖</button><divclass="prizes"><divclass="prize-item"><divclass="prize-icon">📝</div><divclass="prize-name">免作业卡</div></div><divclass="prize-item"><divclass="prize-icon">🚫</div><divclass="prize-name">免罚卡</div></div><divclass="prize-item"><divclass="prize-icon">💺</div><divclass="prize-name">指定座位卡</div></div><divclass="prize-item"><divclass="prize-icon">👨💼</div><divclass="prize-name">班长体验卡</div></div><divclass="prize-item"><divclass="prize-icon">🍭</div><divclass="prize-name">棒棒糖</div></div><divclass="prize-item"><divclass="prize-icon">🍗</div><divclass="prize-name">鸡腿</div></div></div></div><script>document.addEventListener('DOMContentLoaded', function() {const wheel = document.getElementById('wheel');const spinBtn = document.getElementById('spinBtn');const result = document.getElementById('result');let isSpinning = false;let currentRotation = 0; // 用于记录当前旋转角度spinBtn.addEventListener('click', function() {if (isSpinning) return;isSpinning = true;spinBtn.disabled = true;// 随机选择一个奖品 (0到5之间的随机数)const prizes = ['免作业卡', '免罚卡', '指定座位卡', '班长体验卡', '棒棒糖', '鸡腿'];const randomIndex = Math.floor(Math.random() * prizes.length);// 计算旋转角度 (每个扇区60度)const targetRotation = currentRotation + 720 + (randomIndex * 60) + (Math.random() * 60);// 添加旋转动画wheel.style.transition = 'transform 3s cubic-bezier(0.17, 0.67, 0.88, 1.25)';wheel.style.transform = `rotate(${targetRotation}deg)`;// 动画结束后显示结果setTimeout(function() {i=(11-Math.floor((Math.floor(targetRotation)%360)/60))%6;result.textContent = `恭喜你抽到：${prizes[i]}`;isSpinning = false;spinBtn.disabled = false;// 记录当前旋转角度currentRotation = targetRotation;}, 3000);});});</script></body></html>
