抽奖转盘 php

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>抽奖转盘</title>
    <style>
        /* 添加一些基本样式 */
        .wheel {
            width: 300px;
            height: 300px;
            margin: 0 auto;
        }
        .slice {
            width: 100%;
            height: 100%;
            position: absolute;
            text-align: center;
            line-height: 300px;
            font-size: 20px;
            color: white;
        }
    </style>
</head>
<body>
    <div class="wheel" id="wheel">
        <!-- 动态生成切片 -->
    </div>
    <button onclick="spin()">开始抽奖</button>

    <script>
        function spin() {
            // 发送请求到后端进行抽奖
            fetch('spin.php')
                .then(response => response.json())
                .then(data => {
                    // 更新转盘显示
                    const wheel = document.getElementById('wheel');
                    wheel.innerHTML = '';
                    data.result.forEach(item => {
                        const slice = document.createElement('div');
                        slice.className = 'slice';
                        slice.style.transform = `rotate(${item.angle}deg)`;
                        slice.textContent = item.name;
                        wheel.appendChild(slice);
                    });
                });
        }
    </script>
</body>
</html>

<?php
header('Content-Type: application/json');

// 假设奖品列表
$prizes = [
    ['name' => '一等奖', 'angle' => 0],
    ['name' => '二等奖', 'angle' => 45],
    ['name' => '三等奖', 'angle' => 90],
    ['name' => '谢谢参与', 'angle' => 135],
];

// 随机选择一个奖品
$randomIndex = array_rand($prizes);
$result = $prizes[$randomIndex];

echo json_encode(['result' => [$result]]);
?>