圆盘抽奖网页工具源码分享,轻松实现幸运转盘抽奖

“圆盘抽奖”工具在生活中很常见，出现的场合也非常多，比如课堂、研讨会、或者公司年会上的抽奖环节。

现在分享一下随机点名小工具的网页源码（需要注意的是，网页工具在使用时依赖于稳定的网络环境）。感兴趣的同仁可以将源码直接复制到文本文档中，进一步文本文档的文件属性.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>