jquery转盘概率抽奖

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>jQuery转盘概率抽奖</title>
    <script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
    <style>
        #wheel {
            width: 300px;
            height: 300px;
            margin: 0 auto;
            position: relative;
        }
        .slice {
            width: 100%;
            height: 100%;
            position: absolute;
            transform-origin: center;
        }
        .slice:nth-child(1) { background-color: red; transform: rotate(0deg); }
        .slice:nth-child(2) { background-color: blue; transform: rotate(60deg); }
        .slice:nth-child(3) { background-color: green; transform: rotate(120deg); }
        .slice:nth-child(4) { background-color: yellow; transform: rotate(180deg); }
        .slice:nth-child(5) { background-color: purple; transform: rotate(240deg); }
        .slice:nth-child(6) { background-color: orange; transform: rotate(300deg); }
    </style>
</head>
<body>
    <div id="wheel">
        <div class="slice"></div>
        <div class="slice"></div>
        <div class="slice"></div>
        <div class="slice"></div>
        <div class="slice"></div>
        <div class="slice"></div>
    </div>
    <button id="spin">开始抽奖</button>

    <script>
        $(document).ready(function() {
            $('#spin').click(function() {
                var deg = Math.floor(Math.random() * 360) + 720; // 随机旋转角度
                $('#wheel').css('transform', 'rotate(' + deg + 'deg)');
                setTimeout(function() {
                    var winner = Math.floor(deg / 60) % 6 + 1;
                    alert('恭喜你获得了奖品 ' + winner);
                }, 2000);
            });
        });
    </script>
</body>
</html>