当前位置：首页 > jquery

jquery 抽奖

2026-04-08 04:09:46jquery

jQuery 抽奖实现方法

使用jQuery实现抽奖功能可以结合动画效果和随机选择逻辑，以下是一种常见的实现方式：

HTML结构

<div id="lottery-container">
  <ul id="prize-list">
    <li>奖品1</li>
    <li>奖品2</li>
    <li>奖品3</li>
    <li>奖品4</li>
    <li>奖品5</li>
    <li>奖品6</li>
  </ul>
  <button id="start-btn">开始抽奖</button>
</div>

CSS样式

#lottery-container {
  width: 300px;
  margin: 0 auto;
  text-align: center;
}

#prize-list {
  list-style: none;
  padding: 0;
  height: 200px;
  overflow: hidden;
  position: relative;
}

#prize-list li {
  padding: 10px;
  border-bottom: 1px solid #ccc;
  height: 40px;
  line-height: 40px;
}

jQuery代码

$(function() {
  var isRolling = false;
  var rollSpeed = 100; // 初始滚动速度(ms)
  var currentIndex = 0;
  var prizeCount = $('#prize-list li').length;

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

    isRolling = true;
    rollPrize();
  });

  function rollPrize() {
    // 随机决定停止位置
    var stopIndex = Math.floor(Math.random() * prizeCount);
    var rollTimes = 0;
    var totalRollTimes = 20 + stopIndex; // 至少滚动20次

    var rollInterval = setInterval(function() {
      currentIndex = (currentIndex + 1) % prizeCount;
      updatePosition();
      rollTimes++;

      // 逐渐减速
      if(rollTimes > totalRollTimes * 0.7) {
        rollSpeed += 20;
      }

      // 停止条件
      if(rollTimes >= totalRollTimes) {
        clearInterval(rollInterval);
        isRolling = false;
        rollSpeed = 100;
        alert('恭喜获得: ' + $('#prize-list li').eq(stopIndex).text());
      }
    }, rollSpeed);
  }

  function updatePosition() {
    $('#prize-list').css('top', -currentIndex * 40 + 'px');
  }
});

高级抽奖功能实现

对于更复杂的抽奖需求，可以考虑以下增强功能：

概率控制

var prizes = [
  {name: "一等奖", prob: 0.01},
  {name: "二等奖", prob: 0.05},
  {name: "三等奖", prob: 0.1},
  {name: "参与奖", prob: 0.84}
];

function getRandomPrize() {
  var random = Math.random();
  var probSum = 0;

  for(var i = 0; i < prizes.length; i++) {
    probSum += prizes[i].prob;
    if(random <= probSum) {
      return prizes[i];
    }
  }
}

动画优化 使用CSS3 transition替代jQuery animate可以获得更流畅的动画效果：

$('#prize-list').css({
  'transition': 'top 0.1s ease-out',
  'top': -currentIndex * 40 + 'px'
});

服务器端验证 为防止作弊，重要抽奖结果应提交服务器验证：

jquery 抽奖

$.post('/api/lottery', {prize: selectedPrize}, function(response) {
  if(response.success) {
    showPrizeResult(response.prize);
  } else {
    alert('抽奖失败: ' + response.message);
  }
});