js实现抽奖的两种方法

下面给出JS实现抽奖的两种方法的完整攻略。

方法一：用Math.random()生成随机数

1.创建一个数组，用来存储奖品种类和对应的中奖概率，例如：

let awards = [
    {name: '一等奖', probability: 0.1},
    {name: '二等奖', probability: 0.2},
    {name: '三等奖', probability: 0.3},
    {name: '谢谢参与', probability: 0.4}
];

2.生成一个随机数，范围为0到1。

let randomNumber = Math.random();

3.遍历奖品数组，根据每个奖品的中奖概率，判断随机数是否在该奖品的中奖范围内，若是则返回该奖品名称，若否则继续遍历，直到遍历完所有奖品。

function lottery(awards) {
  let randomNumber = Math.random();
  let start = 0;
  for (let i=0; i<awards.length; i++) {
    let award = awards[i];
    if (randomNumber > start && randomNumber < start + award.probability) {
      return award.name;
    }
    start += award.probability;
  }
}

4.调用lottery()函数，根据返回值判断中奖结果。

示例一：实现一个简单的抽奖页面，包括一个按钮和一个显示中奖结果的区域。

HTML代码：

<button onclick="showResult()">开始抽奖</button>
<div id="result"></div>

JS代码：

function showResult() {
  let result = lottery([
    {name: '一等奖', probability: 0.1},
    {name: '二等奖', probability: 0.2},
    {name: '三等奖', probability: 0.3},
    {name: '谢谢参与', probability: 0.4}
  ]);
  document.getElementById('result').innerHTML = result;
}

示例二：实现一个抽奖轮盘，可以使用CSS实现轮盘样式，JS代码类似于示例一，只需要修改显示方式即可。

方法二：使用Fisher-Yates随机排序算法

1.创建一个数组，用来存储所有待抽奖人员的名字，或者用数字表示不同奖项，例如：

let participants = ['张三', '李四', '王五', '赵六', '钱七', '孙八', '吴九', '郑十'];

2.定义一个数组用来存储抽奖结果，数组长度和奖品个数相同。

3.使用Fisher-Yates随机排序算法对参与抽奖人员的数组进行随机排序。

function shuffle(array) {
  for (let i=array.length-1; i>0; i--) {
    let j = Math.floor(Math.random() * (i + 1));
    [array[i], array[j]] = [array[j], array[i]];
  }
  return array;
}

4.从参与抽奖人员的数组中按顺序依次取出对应数量的人员放入抽奖结果数组，即可得到中奖结果。

function lottery(participants, awards) {
  let shuffledParticipants = shuffle(participants);
  let results = [];
  for (let i=0; i<awards.length; i++) {
    results[i] = shuffledParticipants[i];
  }
  return results;
}

5.调用lottery()函数，获取中奖结果。

示例一：实现一个简单的抽奖页面，包括一个按钮和一个显示中奖结果的区域。

HTML代码：

<button onclick="showResult()">开始抽奖</button>
<div id="result"></div>

JS代码：

function showResult() {
  let participants = ['张三', '李四', '王五', '赵六', '钱七', '孙八', '吴九', '郑十'];
  let awards = ['一等奖', '二等奖', '三等奖', '谢谢参与'];
  let results = lottery(participants, awards);
  document.getElementById('result').innerHTML = results.join('<br>');
}

示例二：实现一个网站注册时的邀请码生成功能，邀请码是一个8位随机字符串，每个字符可以是0-9数字或26个字母。

JS代码：

function generateInviteCode() {
  let participants = '0123456789abcdefghijklmnopqrstuvwxyzABCDEFGHIJKLMNOPQRSTUVWXYZ';
  let awards = new Array(8).fill(0);
  for (let i=0; i<8; i++) {
    awards[i] = participants[Math.floor(Math.random()*participants.length)];
  }
  return awards.join('');
}

调用generateInviteCode()函数，即可生成随机的8位邀请码。

以上就是JS实现抽奖的两种方法的完整攻略，希望对你有所帮助。