Results the preview

Implementation approach

The execution order of the highlighted box is defined, and the timer is used to adjust the speed from fast to slow. When the speed falls to a certain range, it will judge whether the highlighted subscript matches the final prize subscript. If the match, the prize will be awarded, and if the mismatch, the speed will continue to decrease.

The body of the

Every special festival or engage in activities need to develop with operation, engage in some lottery activities, the more commonly used lottery methods are: big wheel, nine grid, slot machines and so on. This time we are going to achieve a nine-grid draw.

Page structure

<ul>
    <li id="draw_{{id}}">
        {{ name }}
    </li>
    <li id="draw_{{id}}">
        {{ name }}
    </li>
    <li id="draw_{{id}}">
        {{ name }}
    </li>
</ul>
Copy the code

Process the data

Because the nine grid in the middle of the need to put a click button, and rolling around the middle of the button by clockwise rolling.

The blue words are unsorted, the red words are sorted, and the data is now sorted in the order shown in this diagram

handleValue( obj ) {
    const _action = {
        'draw_3': _= > {
            this.Swap( obj, 3, obj.length - 1);
        },
        'draw_4': _= > {
            this.Swap( obj, 4, obj.length - 1);
        },
        'draw_5': _= > {
            this.Swap( obj, 5, obj.length - 2); }}for( let i in _action ) {
        const branch = _action[`${i}`];
        branch.call(this);
    }
    return obj
            .slice(0.4)
            .concat({ id: 77.text: 'Start the draw' })
            .concat(obj.slice(4));
},

Swap( obj, begin, end) {
    let temp = obj[begin];
    obj[begin] = obj[end];
    obj[end] = temp;
}

Copy the code
  • When subscript 3 is actually the last prize watch, Swap is called to Swap subscript 3 and subscript 7.
  • When the index is 4, this is the place to put the data at index 3, go through the first round of substitution and the place at index 3 is now at index 7 so this time we call Swap and Swap 4 and 3;
  • When it’s 5 it should be interchangeable with 6, and when it’s done it’s done sorting;
  • Finally, insert the lottery button, first cut the first 4 data in the button connected to the last 4 data after the formation of a nine grid;

Turn the implementation

When the timer is on subscript fast overlay and highlight style is added.

run( vm, num ) {
    if( num ! ='draw_77' ) return;
    setTimeout( _= > {
        prize = Math.floor( Math.random() * 8 );
    },1000);
    // Store the DOM of Li
    gather = vm.find('li')
    this.lottery( 10 );
},

lottery( time ) {
    if ( time < 600 ) {
        this.dilution( time, 0.1 );
        return false;
    }
    // If time exceeds 600, the current index is not equal to the final prize index
    if( activeIndex ! = prize ) {this.dilution( time, 0.05 );
    } else {
        setTimeout( _= > {
            // If the draw is -1, the last prize is -1
            const tips = coordinate[activeIndex] == -1 ? 8 : coordinate[activeIndex];
            alert('Congratulations on the draw${_obj[tips].text}`);
            Alltime = null;
        },10); }},/ / coordinate = [0,1,2,5, 1,8,7,6,3];
dilution( time, second ) {
    Alltime = setTimeout( _= > {
        let ask = activeIndex + 1;              // accumulate subscripts
        activeIndex = ask % 9;
        gather.eq(coordinate[activeIndex])      // Get the element to which the highlighting style should be added at the moment
                .addClass('active')             // Add a highlight style
                .siblings('.active')            Filter out all sibling elements of active
                .removeClass('active');         // Remove the highlighting style for the sibling element
        this.lottery( time + time * second );
    }, time )
}
Copy the code
  • Scroll only when the button is clicked, prize is the subscript of the final prize, and Gather stores all li elements;
  • If you were to highlight it according to the index that you’re scrolling, once it’s rolling, it’s going to be irregular because when you’re working with the data, you see it’s at index 3 but it’s actually at index 7, so we need to figure out what scroll sequence to coordinate, which index to highlight for fast scrolling.

The last

The above code can be applied to Vue Reatc with a slight change. There are many requirements for developing this marketing component at work, so we should also write and practice more. Source code in this thank you for reading, I hope to see you can harvest! Please give me a thumbs-up if you think it is useful. Your thumbs-up is the biggest motivation for my creation