当前位置：首页 > PHP

php jq实现抽奖

2026-02-16 15:47:32PHP

PHP 与 jQuery 实现抽奖功能

后端 PHP 抽奖逻辑

PHP 负责处理抽奖的核心逻辑，包括奖品配置、概率计算和中奖结果返回。

<?php
// 奖品配置，包含奖品名称和概率（百分比）
$prizes = [
    ['name' => '一等奖', 'probability' => 1],
    ['name' => '二等奖', 'probability' => 5],
    ['name' => '三等奖', 'probability' => 10],
    ['name' => '谢谢参与', 'probability' => 84]
];

// 抽奖函数
function drawPrize($prizes) {
    $totalProbability = array_sum(array_column($prizes, 'probability'));
    $random = mt_rand(1, $totalProbability);
    $currentProbability = 0;

    foreach ($prizes as $prize) {
        $currentProbability += $prize['probability'];
        if ($random <= $currentProbability) {
            return $prize;
        }
    }
    return end($prizes); // 默认返回最后一个奖品
}

// 获取中奖结果
$result = drawPrize($prizes);
header('Content-Type: application/json');
echo json_encode($result);
?>

前端 jQuery 实现交互

jQuery 负责处理用户交互，发送抽奖请求并展示结果。

<!DOCTYPE html>
<html>
<head>
    <title>抽奖系统</title>
    <script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
    <style>
        #lottery-wheel {
            width: 300px;
            height: 300px;
            border-radius: 50%;
            position: relative;
            background: #f5f5f5;
            margin: 20px auto;
        }
        #start-btn {
            display: block;
            margin: 20px auto;
            padding: 10px 20px;
            background: #ff5722;
            color: white;
            border: none;
            cursor: pointer;
        }
        #result {
            text-align: center;
            font-size: 24px;
            margin-top: 20px;
        }
    </style>
</head>
<body>
    <div id="lottery-wheel"></div>
    <button id="start-btn">开始抽奖</button>
    <div id="result"></div>

    <script>
        $(document).ready(function() {
            $('#start-btn').click(function() {
                $(this).prop('disabled', true);
                $('#result').text('抽奖中...');

                // 模拟转盘动画
                let rotations = 0;
                const spinInterval = setInterval(() => {
                    rotations += 30;
                    $('#lottery-wheel').css('transform', `rotate(${rotations}deg)`);
                }, 100);

                // 发送AJAX请求
                $.ajax({
                    url: 'draw.php',
                    type: 'GET',
                    dataType: 'json',
                    success: function(response) {
                        clearInterval(spinInterval);
                        $('#start-btn').prop('disabled', false);
                        $('#result').text('恭喜获得: ' + response.name);
                        // 最终停止角度
                        $('#lottery-wheel').css('transform', `rotate(${rotations + 3600}deg)`);
                    },
                    error: function() {
                        clearInterval(spinInterval);
                        $('#start-btn').prop('disabled', false);
                        $('#result').text('抽奖失败，请重试');
                    }
                });
            });
        });
    </script>
</body>
</html>