当前位置：首页 > jquery

jquery抽奖

2026-04-08 04:11:25jquery

jQuery抽奖实现方法

使用jQuery实现抽奖功能可以通过以下步骤完成。以下是一个简单的抽奖轮盘示例：

HTML结构

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

CSS样式

jquery抽奖

#lottery {
  position: relative;
  width: 300px;
  height: 300px;
  border-radius: 50%;
  overflow: hidden;
}
.prize {
  position: absolute;
  width: 50%;
  height: 50%;
  transform-origin: 100% 100%;
  text-align: center;
  line-height: 150px;
}

jQuery代码

$(function() {
  // 初始化奖品位置
  var prizes = $('.prize');
  var angle = 360 / prizes.length;
  prizes.each(function(index) {
    $(this).css({
      'transform': 'rotate(' + (angle * index) + 'deg)',
      'background': getRandomColor()
    });
  });

  // 抽奖函数
  $('#start').click(function() {
    var randomAngle = Math.floor(Math.random() * 360) + 3600; // 10圈以上
    $('#lottery').css({
      'transition': 'transform 5s cubic-bezier(0.17, 0.67, 0.21, 0.99)',
      'transform': 'rotate(' + randomAngle + 'deg)'
    });

    // 抽奖结束后显示结果
    setTimeout(function() {
      var winIndex = Math.floor((360 - (randomAngle % 360)) / angle);
      alert('恭喜获得: ' + prizes.eq(winIndex).text());
    }, 5000);
  });

  // 生成随机颜色
  function getRandomColor() {
    var letters = '0123456789ABCDEF';
    var color = '#';
    for (var i = 0; i < 6; i++) {
      color += letters[Math.floor(Math.random() * 16)];
    }
    return color;
  }
});

九宫格抽奖实现

另一种常见的抽奖形式是九宫格抽奖：

jquery抽奖

HTML结构

<div id="grid-lottery">
  <div class="grid" data-id="1">1</div>
  <div class="grid" data-id="2">2</div>
  <div class="grid" data-id="3">3</div>
  <div class="grid" data-id="4">4</div>
  <div class="grid" data-id="5">5</div>
  <div class="grid" data-id="6">6</div>
  <div class="grid" data-id="7">7</div>
  <div class="grid" data-id="8">8</div>
  <button id="grid-start">开始抽奖</button>
</div>

jQuery代码

$(function() {
  var running = false;
  var current = 0;
  var target = 0;
  var timer = null;
  var speed = 100;

  $('#grid-start').click(function() {
    if(running) return;

    running = true;
    target = Math.floor(Math.random() * 8) + 1;
    animate();
  });

  function animate() {
    current = current % 8 + 1;
    $('.grid').removeClass('active');
    $('.grid[data-id="'+current+'"]').addClass('active');

    if(current === target && speed > 300) {
      clearTimeout(timer);
      running = false;
      alert('恭喜获得奖品: ' + current);
      return;
    }

    if(current === 8) {
      speed += 50;
    }

    timer = setTimeout(animate, speed);
  }
});