Historical review:

  • [Vue series] First experience with TypeScript
  • [VUE series] Image clipping plug-in VUe-Cropper, source code interpretation
  • [VUE series] From the interpretation of publish and subscribe mode to the implementation of vUE responsive principle (including VUe3.0)
  • 【 VUE series 】 Gracefully generate dynamic forms with VUE (I)
  • 【 VUE series 】 Gracefully generate dynamic forms with VUE (2)
  • Vue series: Vue-DevTools you don’t know
  • Vue series vUE – Router source code analysis
  • [VUE series] In-depth understanding of VUex
  • 【 VUE series 】 VUE and EChats combine spring, vUE plug-in Vechart
  • Vue series ESLint is configured for the vue2. X project
  • [VUE series] Vue2. X project configures Mocha unit test
  • [VUE series] Two pictures, figure out the diff algorithm, really sweet ah!
  • [VUE series] Lazy loading of vue-Router routes occurs when element-UI is introduced on demand
  • Vue series the correct way to encapsulate common popover components
  • [VUE series] Develop components, package into VUE plug-ins, write documents, configure GH-Pages branch demo, release NPM package one stream

background

Recently, there was a demand – activity raffle, and the weird thing was that instead of nine, twelve prizes, there were seven. Display all prizes on the front, one prize on the 9th draw, the other prizes on the normal draw. This demand itself is not difficult, mainly because this is the first time to do the lottery, some unknown feeling. The project is online. Record it for future reference.

Lucky draw for implementation

Step 1: Layout of 7 prizes

Design requirements, the first row displays 4 prizes, the second row displays 3 prizes, if the seven prizes are sorted from 0, as follows: 0 1 2 3 4 5 6

Step 2: The lottery moves

But the effect of the lottery is to rotate clockwise 0,1,2,3,6,5,4. How to ensure the order of rotation of the lottery, 🤔? Well, that’s a good question.

ArrNum = [0, 1, 2, 3, 6, 5, 4]; prizeIndex starts at 0 by default. If prizes are defined as an array of prizes, setInterval is used to switch the pointer periodically to display the dynamic effect of the lucky draw. If the pointer is at 3, then the next pointer should point to 6. Here are the 10 prizes that make the lucky draw, as shown in figure 4, here are the 10 prizes that make the lucky draw.

The dynamic effect is transition,

.prize-item{/ /...transition: 0.3 s;
      transform: scale(1);
      &::before{/ /...transition: 0.5 s;
        opacity: 0; }}.chose {
    position: relative;
    &::before {
      transition: 0.1 s;
      opacity: 1;
    }
    .prize-item {
      transform: scale(1.5); }}Copy the code

Step 3: Draw prizes

Now that the draw is moving, how does the pointer point to the winning prize, highlight the winning result, and terminate the animation? Before the animation starts, we get the result of the draw, and from the result of the draw, I can calculate the element serial number of the winning prize. When the sweepstakes move function, pointer and winning sequence number match, clearInterval is used to display the result of the sweepstakes.

Step 4: Lottery dynamic effect optimization (from fast to slow)

The product does not want the dynamic effect of the lottery to be uniform, and hopes to have a sweeping effect from fast to slow. 🤔 divides the dynamic effect into two parts to deal with, first fast rotation, then slow rotation. A simpler solution. Make a fixed number of fast turns, and then make the last slow turn to the winning prize.

section

This article does not post a lot of code, the main record of writing activity lottery code ideas. Refined a DEMO, you can refer to.

Source address: https://github.com/habc0807/LuckyDraw/tree/main