当前位置：首页 > jquery

jquery 抽奖

2026-02-03 11:02:55jquery

jquery 抽奖

jQuery 抽奖实现方法

使用 jQuery 实现抽奖功能可以通过以下方式完成，包括随机选择、动画效果和结果展示。

基础抽奖逻辑

// 定义奖品数组
var prizes = ["一等奖", "二等奖", "三等奖", "谢谢参与"];

// 抽奖函数
function startLottery() {
    // 禁用抽奖按钮防止重复点击
    $("#lottery-btn").prop("disabled", true);

    // 随机选择奖品
    var randomIndex = Math.floor(Math.random() * prizes.length);
    var result = prizes[randomIndex];

    // 显示结果
    $("#result").text("恭喜获得: " + result);

    // 重新启用按钮
    setTimeout(function() {
        $("#lottery-btn").prop("disabled", false);
    }, 1000);
}

添加动画效果

function startLotteryWithAnimation() {
    $("#lottery-btn").prop("disabled", true);
    var $prizeList = $(".prize-item");
    var current = 0;
    var count = 0;
    var totalRounds = 2; // 旋转轮数

    // 高亮切换动画
    var interval = setInterval(function() {
        $prizeList.removeClass("active");
        $prizeList.eq(current).addClass("active");
        current = (current + 1) % $prizeList.length;
        count++;

        // 停止条件
        if(count > $prizeList.length * totalRounds + 3) {
            clearInterval(interval);
            var randomIndex = Math.floor(Math.random() * prizes.length);
            $prizeList.removeClass("active");
            $prizeList.eq(randomIndex).addClass("active");
            $("#result").text("恭喜获得: " + prizes[randomIndex]);
            $("#lottery-btn").prop("disabled", false);
        }
    }, 100);
}

HTML 结构示例

<div class="lottery-container">
    <div class="prize-list">
        <div class="prize-item">一等奖</div>
        <div class="prize-item">二等奖</div>
        <div class="prize-item">三等奖</div>
        <div class="prize-item">谢谢参与</div>
    </div>
    <button id="lottery-btn">开始抽奖</button>
    <div id="result"></div>
</div>

CSS 样式建议

.prize-item {
    display: inline-block;
    padding: 10px 20px;
    margin: 5px;
    border: 1px solid #ccc;
    border-radius: 5px;
}

.prize-item.active {
    background-color: #ffcc00;
    color: #fff;
    font-weight: bold;
}

#lottery-btn {
    padding: 10px 20px;
    background-color: #4CAF50;
    color: white;
    border: none;
    border-radius: 5px;
    cursor: pointer;
}

#lottery-btn:disabled {
    background-color: #cccccc;
    cursor: not-allowed;
}

进阶功能

增加概率控制功能，让不同奖品有不同的中奖概率：

function startLotteryWithProbability() {
    var prizeConfig = [
        {name: "一等奖", probability: 0.1},
        {name: "二等奖", probability: 0.2},
        {name: "三等奖", probability: 0.3},
        {name: "谢谢参与", probability: 0.4}
    ];

    var random = Math.random();
    var cumulativeProbability = 0;
    var result;

    for(var i = 0; i < prizeConfig.length; i++) {
        cumulativeProbability += prizeConfig[i].probability;
        if(random <= cumulativeProbability) {
            result = prizeConfig[i].name;
            break;
        }
    }

    $("#result").text("恭喜获得: " + result);
}