This is the 5th day of my participation in the August More Text Challenge

preface

Daily look at the nuggets front page of the popular article, today’s article many, or was attracted to it. Cloud World: # Nuggets raffle

Online raffle preview address

The reason is simple, since the nuggets online check-in lottery system, the daily constant small fun, is the lottery! Draw! Draw! Winning or not is one thing. The process is fun.

After watching the article in line with the spirit of CV model, to admire the source, original article source address Source is considered as a pure js lottery, wanted to think oneself haven’t output article for a long time, during the midday rest, give oneself add a few reasonable demand, to achieve it, the articles is also very detailed introduction of the realization of the lottery, I will not copy the article content, I will start from the implementation of the raffle after the transformation explained, if you want to know about the original implementation see the big guy’s article cloud world: # Nuggets of raffle.

The new demand

  • Requirement 1: It’s random every time
  • Requirement 2: You can set weights for each winning option
  • Requirement 3: Add a viewing award

Requirement 1: It’s random every time

Simple analysis, there are eight winning, the original is fixed set winning number 4, then we can change to random. Get a random number from 0 to 7 (math.floor (math.random () * 8)), and set the endpoint, which is the winner

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

Copy the code

However, the prompt content is still dead, we need to prompt the corresponding content according to our winning content, global increase a gift variable, used to obtain the current winning content, so that you can display the corresponding winning prompt according to the content

// Const arr = ['66 Ore ', 'Random Limited Badges ',' Nuggets T-shirt ', 'Lego Ocean Liner ', 'Switch', 'Yoyo Pillow ',' Nuggets Mouse Pad ', DialogEl. QuerySelector ('.desc.-gift '). TextContent = gift + ' 'Copy the code

Requirement 2: You can set weights for each winning option

The lottery can not be to give you the same probability, certainly need to set a background winning probability or winning weight, I here to achieve the weight of the way. Set a weight array, and then a random number less than the sum of weights, see which section this number belongs to, return the corresponding winning number can be. The idea here is to iterate over which column this random number belongs to, iterate over whether this random number is less than the sum before I and I, and if it is less than I, it is greater than I minus 1(if I is 0, it is greater than 0), and return 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]
    }
  }
}
Copy the code

The implemented algorithm needs to be optimized…

So you can set their own winning weight. (weightRatio), you can change the array in the code to achieve the winning ratio yourself

Read the comments, revised a version, before the revision of the winning rate is the same, can be as the lottery is random. Const weightRatio = [3000, 10, 10, 1, 1, 10, 10, 1000]

  • The probability of a bug is 24.7402%
  • The probability of ore is 74.2207%
  • Badges, mouse pads, T-shirts and throw pillows were all 0.2474%,
  • Lego versus Switch is 0.02474%,

The probability of non-bugs and minerals is 1.03909%, which should mean one out of 100 draws. (This is only demo simulation probability, does not represent other, for fun, fun, but we can get so many requirements for welfare is not good)

Requirement 3: Add a viewing award

This need is divided into two parts,

  • 1. A button to add view and corresponding events
  • 2. A button to add view and corresponding events

The first point is simply to add a div(

click to view my results

) and set the corresponding style. Here, add a unique class name that can be used to set the style and so on to add click events

There are two ways to do this. The quickest way to do this is to use the browser’s alert() to display the winners.

First Edition (rough edition)

Set up a giftArr array of winning items, and then push it into the array every time you win the prize. Finally, when checking, go through the number group and display the corresponding contents inside. The disadvantages are obvious, because there are so many prizes, I don’t know how many prizes I have won

var lookGift = document.querySelector(".main-look"); lookGift.addEventListener('click', function () { if (! GiftArr | | giftArr. Length = = = 0) {alert (' temporarily no gain, go to the lottery! ') } else { let str = '' giftArr.forEach((item, index) => { str += (index ? ',' : '') + item + '\n' }) alert(str) } })Copy the code

Effect:

2nd Edition (Optimized edition)

GiftArr = giftArr=[0,0,0,0,0,0,0,0,0,0,0,0,0], when the number +1 is used to count winnings

Giftarr. splice(randomNum, 1, 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 ore ', 'limited badge random', 'the nuggets' new T-shirt,' le hai-yang gao ships', 'Switch', 'hold pillow Yoyo', 'the nuggets mouse pad, 'Bug'] const total = giftarr.reduce ((prev, curr) => {return prev + curr}) let STR = 'congratulationstotal' + total + ' ' + '\n' giftArr.forEach((item, index) => { if (item ! = 0) {STR += arr[index] + '*' + item + '\n'}}) alert(STR)} else {STR += arr[index] + '*' + item + '\n'}}) alert(STR) ')}})Copy the code

Project online preview address and code address

You can experience the fun of the infinite ore raffle online, but don’t ask me for material goods, just for entertainment, HHH

Online Preview address

The code address

This article summary

To their own demand, so do no F can say it, more motivated. The above is some simple transformation of the lottery demand, if you want other effects or needs, you can leave a message, see reasonable demand that is the arrangement. Thank you again for sharing the original article. Practice makes perfect! .