基于js实现抽红包并分配代码实例

下面就为您详细讲解基于JS实现抽红包并分配的完整攻略。

一、技术准备

在实现抽红包功能之前，我们需要进行一些技术准备：

1. HTML页面：用于显示抽奖界面和抽奖结果；
2. CSS：用于页面的美化；
3. JavaScript：对抽奖进行控制和实现；

二、实现思路

实现抽红包并分配的方法有很多，但这里我们将介绍一种比较简单的方法：

1. 在HTML页面中设计好抽奖界面，包括奖项列表、抽奖按钮等元素；
2. 在JavaScript中定义奖项列表和奖项对应的概率，通过随机数来决定用户获得的奖项；
3. 当用户点击抽奖按钮时，生成一个随机数，根据随机数来判断用户获得的奖项，并将结果显示在页面上；
4. 把所有抽中奖项的用户按照获奖时间进行排序，分别计算总奖金和每个用户应得的奖金，并将结果在页面上展示出来。

三、代码实现

1. 定义奖项和概率

const prizeList = ['一等奖', '二等奖', '三等奖', '参与奖'];
const probabilityList = [0.01, 0.02, 0.05, 0.92];

2. 生成随机数，并计算获奖结果

function getPrize() {
  let seed = Math.random();
  let p = 0;
  let sum = probabilityList.reduce(function (prev, curr) {
    return prev + curr;
  });
  for (let i = 0; i < probabilityList.length; i++) {
    p += probabilityList[i] / sum;
    if (seed < p) {
      return prizeList[i];
    }
  }
}

3. 点击按钮抽奖

document.querySelector('#draw').addEventListener('click', function () {
  let result = getPrize();
  document.querySelector('#result').innerHTML = result;
});

4. 计算奖金，并排序展示

let awardList = [];
let totalBonus = 1000;
let prizeAmountList = [500, 200, 100, 0];

function addAward(item) {
  awardList.push({
    name: item,
    time: new Date().getTime()
  });
}

document.querySelector('#draw').addEventListener('click', function () {
  let result = getPrize();
  addAward(result);
  awardList.sort(function (a, b) {
    return a.time - b.time;
  });
  let count = 0;
  awardList.forEach(function (item) {
    count++;
    item.bonus = Math.floor(totalBonus * prizeAmountList[prizeList.indexOf(item.name)] / 100);
    document.querySelector('#award-list').innerHTML += '<li>第' + count + '名：' + item.name + '，奖金：' + item.bonus + '</li>';
  });
});

以上就是基于JS实现抽红包并分配的完整攻略。两条示例见下：

示例一

假设有以下抽奖配置：

const prizeList = ['一等奖', '二等奖', '三等奖', '参与奖'];
const probabilityList = [0.01, 0.02, 0.05, 0.92];

假设用户参与抽奖，点击抽奖按钮，结果为“参与奖”。

示例二

假设有以下抽奖配置：

const prizeList = ['一等奖', '二等奖', '三等奖', '参与奖'];
const probabilityList = [0.01, 0.02, 0.05, 0.92];

假设有5人参与抽奖，中奖情况如下：

• A：参与奖；
• B：二等奖；
• C：一等奖；
• D：参与奖；
• E：参与奖；

计算结果如下：

• 总共500元奖金；
• 一等奖获得者C，奖金250元；
• 二等奖获得者B，奖金100元；
• 参与奖获得者A、D、E，奖金分别是0元。

以上就是两个基于JS实现抽红包并分配的代码示例。