当前位置：首页 > PHP

php实现滚动抽奖

2026-02-15 05:09:59PHP

实现滚动抽奖功能

滚动抽奖功能可以通过前端动画和后端逻辑结合实现。以下是一个完整的PHP实现方案：

前端HTML和CSS部分

创建一个基本的抽奖界面，包含奖品展示区域和抽奖按钮：

php实现滚动抽奖

<div class="lottery-container">
    <div class="prize-wheel">
        <div class="prize-item" data-id="1">奖品1</div>
        <div class="prize-item" data-id="2">奖品2</div>
        <div class="prize-item" data-id="3">奖品3</div>
        <div class="prize-item" data-id="4">奖品4</div>
        <div class="prize-item" data-id="5">奖品5</div>
        <div class="prize-item" data-id="6">奖品6</div>
    </div>
    <button id="start-lottery">开始抽奖</button>
</div>

<style>
.lottery-container {
    width: 400px;
    margin: 0 auto;
    text-align: center;
}
.prize-wheel {
    display: flex;
    flex-wrap: wrap;
    justify-content: space-around;
    margin-bottom: 20px;
}
.prize-item {
    width: 100px;
    height: 100px;
    border: 1px solid #ccc;
    display: flex;
    align-items: center;
    justify-content: center;
    margin: 5px;
    background: #f9f9f9;
}
.prize-item.active {
    background: #ffcc00;
    box-shadow: 0 0 10px gold;
}
</style>

JavaScript动画效果

使用jQuery实现滚动动画和结果展示：

php实现滚动抽奖

$(document).ready(function() {
    let isRolling = false;
    let rollInterval;
    let currentIndex = 0;
    const prizeItems = $('.prize-item');

    $('#start-lottery').click(function() {
        if(isRolling) return;

        isRolling = true;
        $('.prize-item').removeClass('active');

        // 先快速滚动产生效果
        rollInterval = setInterval(function() {
            prizeItems.removeClass('active');
            currentIndex = (currentIndex + 1) % prizeItems.length;
            $(prizeItems[currentIndex]).addClass('active');
        }, 100);

        // 发送AJAX请求获取抽奖结果
        $.ajax({
            url: 'lottery.php',
            type: 'POST',
            dataType: 'json',
            success: function(response) {
                // 收到结果后减速停止
                clearInterval(rollInterval);

                let targetIndex = response.prize_id - 1;
                let steps = 10 + Math.floor(Math.random() * 10); // 额外滚动圈数

                let slowRoll = setInterval(function() {
                    prizeItems.removeClass('active');
                    currentIndex = (currentIndex + 1) % prizeItems.length;
                    $(prizeItems[currentIndex]).addClass('active');

                    if(currentIndex === targetIndex && steps-- <= 0) {
                        clearInterval(slowRoll);
                        isRolling = false;
                        alert('恭喜获得: ' + response.prize_name);
                    }
                }, 300);
            }
        });
    });
});

PHP后端处理

创建lottery.php处理抽奖逻辑：

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

// 奖品配置
$prizes = [
    ['id' => 1, 'name' => '一等奖', 'probability' => 1],
    ['id' => 2, 'name' => '二等奖', 'probability' => 5],
    ['id' => 3, 'name' => '三等奖', 'probability' => 10],
    ['id' => 4, 'name' => '四等奖', 'probability' => 20],
    ['id' => 5, 'name' => '五等奖', 'probability' => 30],
    ['id' => 6, 'name' => '谢谢参与', 'probability' => 34]
];

// 抽奖算法
function lotteryDraw($prizes) {
    $totalProbability = array_sum(array_column($prizes, 'probability'));
    $rand = mt_rand(1, $totalProbability);
    $current = 0;

    foreach ($prizes as $prize) {
        $current += $prize['probability'];
        if ($rand <= $current) {
            return $prize;
        }
    }
}

// 防止频繁抽奖
session_start();
if (isset($_SESSION['last_lottery']) && time() - $_SESSION['last_lottery'] < 5) {
    die(json_encode(['error' => '抽奖间隔太短']));
}
$_SESSION['last_lottery'] = time();

// 执行抽奖
$result = lotteryDraw($prizes);
echo json_encode([
    'prize_id' => $result['id'],
    'prize_name' => $result['name']
]);
?>

数据库记录（可选）

如果需要记录抽奖结果，可以添加数据库操作：

// 在lottery.php中抽奖后添加
$db = new PDO('mysql:host=localhost;dbname=lottery', 'username', 'password');
$stmt = $db->prepare("INSERT INTO lottery_records (user_id, prize_id, prize_name, create_time) VALUES (?, ?, ?, NOW())");
$stmt->execute([
    $_SESSION['user_id'] ?? 0,
    $result['id'],
    $result['name']
]);