当前位置：首页 > article >正文

jQuery九宫格抽奖，php处理抽奖信息

article 2024/12/2 17:55:44

功能介绍

jQuery九宫格抽奖是一种基于jQuery库的前端抽奖效果。通过九宫格的形式展示抽奖项，用户点击抽奖按钮后，九宫格开始旋转，最终停在一个随机位置上，此位置对应的抽奖项为用户的中奖结果。

本文实现九宫格的步骤为：
1. 创建一个包含九个格子的九宫格，通过php接口获取奖品信息。
2. 编写jQuery代码，监听抽奖按钮的点击事件，一旦点击，执行抽奖逻辑。
3. 在抽奖逻辑中，通过php接口获取抽奖结果。
4. 使用jQuery的动画函数，让九宫格开始旋转，最后在中奖方块位置停下。
5. 根据停止位置的抽奖项确定用户的中奖结果，并进行相关处理。

为了增加抽奖的趣味性和交互性，还可以在九宫格的格子上增加一些动态效果，例如使用CSS3的动画效果为格子添加旋转、放大等动画效果，或者在抽奖过程中播放一段音乐或动画等等。

效果图

代码实现

后端部分

获取奖品信息，正式项目可以存于数据库中方便后台管理

// 模拟九宫格的奖品
$prize = range(1, 9);
$prizeArray = [];
foreach ($prize as $value){
    $prizeArray[] = [
        'id' => $value,
        'name' => '第' . $value . '个奖品',
        'weight' => $value * 10,// 权重
    ];
}
echo json_encode($prizeArray);

根据奖品权重获取抽奖结果

$totalWeight = array_sum(array_column($prizeArray, 'weight'));// 总权重
$randNumber = rand(1, $totalWeight);// 获取一个随机数
$currentWeight = 0;// 当前权重
$result = [];// 抽奖结果
foreach ($prizeArray as $value){
    $currentWeight += $value['weight'];
    if ($randNumber <= $currentWeight){
        $result = $value;
        break;
    }
}
echo $result['id'];

前端部分

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>九宫格抽奖</title>
    <link rel="stylesheet" type="text/css" href="index.css">
</head>
<body>
    <div id="lottery-box">
        <ul class="lottery-grid">
        </ul>
        <button id="start-btn">开始抽奖</button>
    </div>
    <script src="jquery.min.js"></script>
    <script src="index.js"></script>
</body>
</html>

样式

#lottery-box {
    width: 320px;
    margin: 0 auto;
    text-align: center;
}

.lottery-grid {
    list-style: none;
    padding: 0;
    margin: 0;
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;
}

.grid-item {
    width: 100px;
    height: 100px;
    line-height: 100px;
    border: 1px solid #000;
}

#start-btn {
    margin-top: 12px;
}

JS部分，这里通过ajax获取奖品信息和抽奖结果，以及动画效果

$(document).ready(function() {
    $.ajax({
        //请求资源路径
        url:"prize.php",
        //请求方式
        type:"POST",
        //请求成功后调用的回调函数
        success:function (data) {
            data = $.parseJSON(data);
            for (let i = 0; i < data.length; i++){
                $('.lottery-grid').append('<li class="grid-item">' + data[i]['name'] + '</li>');
            }
        },
        //请求失败后调用的回调函数
        error:function () {
            alert("未获取到奖品");
        }
    });
    $('#start-btn').click(function() {
        $(this).prop('disabled', true);
        setTimeout(function(){
            $('#start-btn').prop('disabled', false);
        }, 5000); // 禁用按钮5秒钟
        const $gridItems = $('.grid-item');
        $gridItems.css('background-color', '#fff');
        // 获取抽奖结果
        $.ajax({
            //请求资源路径
            url:"result.php",
            //请求方式
            type:"POST",
            //请求成功后调用的回调函数
            success:function (data) {
                let randomNumber = parseInt(data);
                // 开始动画效果
                let currentIndex = 0;
                const interval = setInterval(function () {
                    $gridItems.eq(currentIndex - 1).css('background-color', '#fff');
                    $gridItems.eq(currentIndex).css('background-color', '#8581812A');
                    currentIndex = (currentIndex + 1) % $gridItems.length;
                }, 200);
                // 停止动画，显示抽奖结果
                setTimeout(function() {
                    clearInterval(interval);
                    for (let i = 1; i <= $gridItems.length; i++){
                        if (randomNumber === i){
                            $gridItems.eq(i).css('background-color', '#f00');
                        }else {
                            $gridItems.eq(i).css('background-color', '#fff');
                        }
                    }
                }, 5000);
            },
            //请求失败后调用的回调函数
            error:function () {
                alert("获取抽奖结果失败");
            }
        });
    });
});

查看全文

http://www.kler.cn/a/418770.html