快乐模拟掘金抽奖项目

这是我参与8月更文挑战的第5天，活动详情查看： 8月更文挑战

前言

日常看看掘金首页的热门文章，今日份文章很多，还是被它吸引。云的世界：# 掘金的抽奖

原因很简单，自从掘金上线签到抽奖系统，每天不断的小乐趣，就是抽奖！抽奖！抽奖！，中没中是一回事，过程是开心的。

看完文章后本着cv的借鉴精神，去仰慕了一下源码，原文章源码地址源码是纯js实现抽奖的，想了想自己好久没输出文章了，趁着午间休息，给自己增加几个合理需求，去实现它，大佬的文章也是很详细介绍抽奖的实现了，我就不抄袭文章内容了，我就从实现抽奖后改造开始说明，如果你对原来实现有想了解的请看大佬的文章云的世界：# 掘金的抽奖。

新需求

需求1：每次都是随机抽取
需求2：可以为每个中奖选项设置权重
需求3：增加一个查看中奖项

需求1：每次都是随机抽取

简单分析，中奖有八项，原文是固定设置中奖序号4，那我们就改成随机的即可。获取随机一个0-7的随机数(Math.floor(Math.random() * 8))，然后去设置终点，也就是中奖的内容

const randomNum = Math.floor(Math.random() * 8)
lottery.setPrize([randomNum])

但是这样提示内容还是原来写死的，需要根据我们中奖的内容去提示对应内容，全局增加一个gift变量，用来获取当前中奖内容，这样做就可以每次根据中的内容去显示对应中奖提示

 // 奖池
 const arr = ['66矿石', '随机限量徽章', '掘金新款T恤', '乐高海洋巨轮', 'Switch', 'Yoyo抱枕', '掘金鼠标垫', 'Bug']
  gift = arr[randomNum] //中奖内容
  
 //中奖提示
  dialogEl.querySelector('.desc-gift').textContent = gift + '一个，请联系管理员兑换！！'

需求2：可以为每个中奖选项设置权重

那抽奖不可能都是给你一样的概率，肯定需要后台设置一个中奖概率或者中奖权重，我这里实现权重的方式。设置一个权重数组，然后随机一个小于权重和的数，看看这个数是属于哪一段的，返回对应的中奖序号即可。我这里实现思路是，遍历看看这个随机数是属于哪一档的，遍历对比这个随机数是否小于i和i之前的和，如果小于i,大于i-1(i为0的话，大于0),返回i

function getGift() {
  const weightRatio = [1, 1, 1, 1, 1, 1, 1, 1]
  const total = weightRatio.reduce((prev, curr) => {
    return prev + curr
  })
  let randomNum = Math.random() * total
  for (let i = 0; i < weightRatio.length; i++) {
    if (randomNum < weightRatio[i]) {
      return i
    } else {
      randomNum -= weightRatio[i]
    }
  }
}

实现的算法有待优化...

这样的话就可以自己设置中奖权重了。(weightRatio这个数组)，你自己可以去改代码中的这个数组来实现中奖比例

看了评论，修改了一版，修改前中奖率都一样，可以当做抽中什么都是随机的。最新版在线demo修改了权重：const weightRatio = [3000, 10, 10, 1, 1, 10, 10, 1000]

bug的概率是24.7402%
矿石的概率是74.2207%
徽章、鼠标垫、T恤、抱枕的概率都是0.2474%,
乐高和switch的概率是0.02474%, 非bug和矿石的概率1.03909%，按理说抽一百次可以中一次奖。(这只是demo模拟概率，不代表其它，图个乐子，吐槽归吐槽，但能白拿的福利还那么多要求就是我们的不是了)

需求3：增加一个查看中奖项

这个需求分为两点，

1.一个增加查看的按钮和对应事件
2.一个增加查看的按钮和对应事件

第一点就简单的在对应位置增加一个div(<div class='main-look'>点击查看我的收获</div>)和设置对应样式,这里增加一个独有的类名，可以用来设置样式和等等增加点击事件

这里也要说两种实现吧，最快的方法就是用浏览器自带的alert()去显示中奖内容，

第一版 (粗糙版)

设置一个放中奖物品的数组giftArr，然后每次中奖都push进这个数组中，最后查看的时候去遍历数组，展示里面对应内容，缺点很明显，奖品多了，自己都不知道中了几个

var lookGift = document.querySelector(".main-look");
lookGift.addEventListener('click', function () {
  if (!giftArr || giftArr.length === 0) {
    alert('暂时没有收获，先去抽奖吧！')
  } else {
    let str = ''
    giftArr.forEach((item, index) => {
      str += (index ? ',' : '') + item + '\n'
    })
    alert(str)
  }
})

效果：

第二版 (优化版)

第一版只是玩玩，那第二版同样来个数组来收集中奖，不过这个数组初始化giftArr=[0,0,0,0,0,0,0,0],当抽奖后对应的数字+1，就能统计中奖次数了

// 保存中奖内容
giftArr.splice(randomNum, 1, giftArr[randomNum] + 1)
//展示
var lookGift = document.querySelector(".main-look");
lookGift.addEventListener('click', function () {
  const flag = giftArr.some(item => {
    return item !== 0
  })
  if (flag) {
    const arr = ['66矿石', '随机限量徽章', '掘金新款T恤', '乐高海洋巨轮', 'Switch', 'Yoyo抱枕', '掘金鼠标垫', 'Bug']
    const total = giftArr.reduce((prev, curr) => {
      return prev + curr
    })
    let str = '恭喜总计中奖' + total + '个，其中：' + '\n'
    giftArr.forEach((item, index) => {
      if (item != 0) {
        str += arr[index] + '*' + item + '\n'
      }
    })
    alert(str)
  } else {
    alert('暂时没有收获，先去抽奖吧！')
  }
})

项目在线预览地址和代码地址

可以在线体验一下无限矿石抽奖的乐趣，但是别找我要实物，仅供娱乐，hhh

在线预览地址

代码地址

本文小结

自己给自己提需求，这样做起来就无f可说了吧，比较有动力。以上就是对抽奖需求的一些简单改造，如果你想要别的效果或者需求，可以留言，看见合理的需求那就是安排。再次感谢云大佬的原文分享。 熟能生巧(Practice make perfect!)。