一、积分抽奖系统

在Web应用里，积分抽奖活动一直是提升用户活跃度和留存率的有效手段。接下来就来看看，如何用HTML、CSS和Ja vaScript，实现一个带流畅动画和良好体验的九宫格积分抽奖系统。

二、效果演示

这个抽奖系统采用了经典的九宫格布局，中间是抽奖按钮，周围的八个格子展示不同的奖品。用户点击“开始抽奖”后，系统会扣除100积分，然后启动动画，最终高亮显示中奖结果，并通过弹窗展示奖励详情。

三、系统分析

1、页面结构

页面采用居中布局，主体容器 container 包含了标题、积分信息和抽奖区域三个主要部分。

1.1 主体容器

  
积分抽奖
  
    当前积分：
1000
  
  
      

1.2 九宫格布局

那么，这个九宫格是怎么布局的呢？答案是使用CSS Grid，实现3×3的网格结构，中心位置则放置了抽奖按钮。

    
    
    
10积分
    
参与奖
  
  
    
    
50积分
    
幸运奖
  
  
    
    
100积分
    
三等奖
  
    
    
    
500积分
    
特等奖
  
  
    
    
开始抽奖
    
消耗: 100积分
  
  
    
    
20积分
    
鼓励奖
  
    
    
    
200积分
    
二等奖
  
  
    
    
谢谢参与
    
再接再厉
  
  
    
    
30积分
    
安慰奖
  

1.3 结果弹窗

中奖结果的展示，则通过一个模态框 result-modal 来实现。

  
    
    
    
    确定  

2、核心功能实现

2.1 全局变量定义

系统通过几个关键变量来管理整个抽奖状态：

• currentPoints：当前积分
• drawCost：每次抽奖的消耗积分
• isDrawing：抽奖是否正在进行
• prizes：奖品配置数组

let currentPoints = 1000;let drawCost = 100;let isDrawing = false;let prizes = [  { name: '10积分', points: 10, probability: 25, desc: '恭喜获得参与奖！' },  // ...其他奖品配置];

2.2 抽奖流程控制

startDraw 函数是抽奖的总控制台。它首先用 isDrawing 标志位防止重复点击，然后检查积分是否足够，接着扣除积分、更新界面，清理上一次的高亮状态，最后启动核心的动画逻辑 startLotteryAnimation。

function startDraw() {  if (isDrawing) return;  if (currentPoints < drawCost) {    showResult('积分不足', `当前积分：${currentPoints}，需要${drawCost}积分才能抽奖！`);    return;  }  isDrawing = true;  currentPoints -= drawCost;  updatePointsDisplay();  updateDrawButtonState(true);  // 清除之前选中状态并启动动画  document.querySelectorAll('.lottery-item').forEach(item => {    item.classList.remove('active');  });  startLotteryAnimation();}

2.3 抽奖动画实现

startLotteryAnimation 函数负责实现九宫格循环高亮的动画效果。它先确定总共有8个奖项格子，设定基础转动圈数为3圈，然后通过 getRandomPrizeIndex 获取中奖位置，计算出总的动画步数。

动画过程中，使用递归 setTimeout 实现循环播放，每一步都会移除前一个格子的高亮状态、给当前格子添加高亮效果，同时根据当前步数动态调整速度——前20步加速，最后20步减速，最终在指定步数停止，并调用 showDrawResult 展示结果。

function startLotteryAnimation() {  const totalItems = 8;  const baseRounds = 3;   const finalIndex = getRandomPrizeIndex();  const totalSteps = baseRounds * totalItems + finalIndex;  let currentStep = 0;  let currentIndex = 0;  let previousIndex = -1;  let speed = 50; // 初始速度  const animate = () => {    // 移除前一个元素的 active 类    if (previousIndex !== -1) {      const previousItem = document.querySelector(`[data-index="${previousIndex}"]`);      if (previousItem) {        previousItem.classList.remove('active');      }    }    // 高亮当前格子    const currentItem = document.querySelector(`[data-index="${currentIndex}"]`);    if (currentItem) {      currentItem.classList.add('active');    }    previousIndex = currentIndex;    currentStep++;    // 速度逐渐变慢    if (currentStep > totalSteps - 20) {      speed += 10;    } else if (currentStep < 20) {      speed = Math.max(30, speed - 5);    }    // 更新索引    currentIndex = (currentIndex + 1) % totalItems;    if (currentStep < totalSteps) {      setTimeout(animate, speed);    } else {      // 动画结束，显示结果      setTimeout(() => {        showDrawResult(finalIndex);      }, 500);    }  };  animate();}

2.4 概率算法实现

getRandomPrizeIndex 函数基于概率权重算法来确定中奖结果。它首先生成一个0到100之间的随机数，然后遍历 prizes 数组，累加每个奖项的概率值，当随机数小于等于累计概率时，就返回当前奖项的索引，从而实现按照预设概率分布进行抽奖。如果遍历完所有奖项都没有匹配，则默认返回索引0。

function getRandomPrizeIndex() {  const random = Math.random() * 100;  let cumulative = 0;  for (let i = 0; i < prizes.length; i++) {    cumulative += prizes[i].probability;    if (random <= cumulative) {      return i;    }  }  return 0;}

四、扩展建议

• 增加抽奖次数限制：设置每日抽奖次数上限，提高稀缺性
• 丰富奖品种类：添加实物奖品、优惠券等非积分奖励类型
• 历史记录功能：记录用户的抽奖历史，增强参与感
• 社交分享机制：允许用户分享中奖结果，扩大传播效果
• 主题皮肤切换：提供多种视觉主题让用户随时切换
• 音效支持：添加背景音乐和音效，增强沉浸感

五、完整代码

        
  
积分抽奖
  
    当前积分：
1000
  
  
        
      
      
10积分
      
参与奖
    
    
      
      
50积分
      
幸运奖
    
    
      
      
100积分
      
三等奖
    
        
      
      
500积分
      
特等奖
    
    
      
      
开始抽奖
      
消耗: 100积分
    
    
      
      
20积分
      
鼓励奖
    
        
      
      
200积分
      
二等奖
    
    
      
      
谢谢参与
      
再接再厉
    
    
      
      
30积分
      
安慰奖
    
  
  
    
    
    
    确定