用jq + es6写一个抽奖奖盘

如图所示，当点击中间的开始抽奖会顺时针旋转
最后停在一个位置上

一、静态html页面(index.html)

        <div class="right" id="lottery">
            <div class="right-row">
                <div class="btn btn-normal lottery-unit-0" data-sort="-1">
                    <img class="goldcoin">
                    <div class="text"></div>
                </div>
                <div class="btn btn-normal lottery-unit-1" data-sort="-1">
                    <img class="goldcoin">
                    <div class="text"></div>
                </div>
                <div class="btn btn-normal lottery-unit-2" data-sort="-1">
                    <img class="goldcoin">
                    <div class="text"></div>
                </div>
            </div>
            <div class="right-row">
                <div class="btn btn-normal lottery-unit-7" data-sort="-1">
                    <img class="goldcoin">
                    <div class="text"></div>
                </div>
                <div class="btn-start"></div>
                <div class="btn btn-normal lottery-unit-3" data-sort="-1">
                    <img class="goldcoin">
                    <div class="text"></div>
                </div>
            </div>
            <div class="right-row">
                <div class="btn btn-normal lottery-unit-6" data-sort="-1">
                    <img class="goldcoin">
                    <div class="text"></div>
                </div>
                <div class="btn btn-normal lottery-unit-5" data-sort="-1">
                    <img class="goldcoin">
                    <div class="text"></div>
                </div>
                <div class="btn btn-normal lottery-unit-4" data-sort="-1">
                    <img class="goldcoin">
                    <div class="text"></div>
                </div>
            </div>
        </div>

二、封装一个类(lottery.js)

import $ from './lib/jquery.min'
class Lottery{
    // 构造
    constructor(index, count, timer, speed, times, cycle, prize){
        // 当前转动到哪个位置，起点位置
        this.index = index || -1
        // 总共有多少个位置
        this.count = count || 0
        //setTimeout的ID，用clearTimeout清除
        this.timer = timer || 0
        // 初始转动速度
        this.speed = speed || 20
        // 已经转动次数
        this.times = times || 0
        // 转动基本次数：即至少需要转动多少次再进入抽奖环节
        this.cycle = cycle || 20
        // 中奖位置 0~7
        this.prize = prize || -1
        // 这个类的本尊
        this.obj = null
    }
    // 第一次执行的时候初始化一下
    firstInit() {
        if ( $('#lottery').find('.btn-normal').length > 0 ){
            const $lottery = $('#lottery')
            const $units = $lottery.find('.btn')
            this.obj = $lottery
            this.count = $units.length
            $lottery.find('.lottery-unit-' + this.index).addClass('btn-active')
        }
    }
    // 转动
    roll() {
        let index = this.index
        let count = this.count
        const lottery = this.obj
        // 当前index移除活跃状态
        $(lottery).find('.lottery-unit-' + index).removeClass('btn-active')
        index += 1
        // 保证index在0~7
        if(index > count - 1) {
            index = 0
        }
        // 找到下一个增加活跃状态
        $(lottery).find('.lottery-unit-' + index).addClass('btn-active')
        this.index = index
        return false
    }
    // 停止
    stop (index) {
        this.prize = index;
        return false;
    }
}
export {Lottery};

三、运用(index.js)

import $ from './lib/jquery.min'
import {Lottery} from './lottery'

// 初始化转盘
const lottery = new Lottery()
let isClick = false
lottery.firstInit()

// 如果点击了转盘的开始抽奖按钮
$('.btn-start').on('click', function() {
    if(isClick || $(this).hasClass('btn-start-disabled')) { //click控制一次抽奖过程中不能重复点击抽奖按钮，后面的点击不响应
        return false;
    } else {
        lottery.speed = 100;
        roll(); //转圈过程不响应click事件，会将click置为false
        isClick = true; //一次抽奖完成后，设置click为true，可继续抽奖
        setStart()
        return false;
    }
})

// 转圈
function roll() {
    // 将开始抽奖按钮置灰
    setDisabled()
    // 转动次数
    lottery.times += 1;
    //转动过程调用的是lottery的roll方法，这里是第一次调用初始化
    lottery.roll();
    // 如果已经转动次数大于设定的循环数 且 中奖位置等于当前位置
    if(lottery.times > lottery.cycle + 10 && lottery.prize === lottery.index) {
        // 清除定时器，别继续转了
        clearTimeout(lottery.timer);

        // 设置弹窗里的奖品
        const imgURL = $('.lottery-unit-' + lottery.prize).children('.goldcoin').attr('src')
        const text = $('.lottery-unit-' + lottery.prize).children('.text').html()
        $('.dialog-prize>.email>.email-content>img').attr('src', imgURL)

        $('.dialog-prize>.email>.email-content .text').text(text)
        setTimeout(function () {
            // 打开弹窗
            $('.dialog-prize').show()
        }, 500);

        // 重置数据
        lottery.prize = -1
        lottery.times = 0
        isClick = false
        // 点亮已经被置灰的开始抽奖按钮
        let redpointCount = parseInt($('.btn-active .redpoint').text()) - 1
        $('.btn-active .redpoint').text(redpointCount)
        if (redpointCount > 0) {
            setStart()
        } else {
            clearRedPoint('.btn-active')
        }
    } else {
        if(lottery.times < lottery.cycle) {
            // 速度每次慢10
            lottery.speed -= 10
        } else if(lottery.times === lottery.cycle) {
            // 静态演示，随机产生一个奖品序号，实际需请求接口产生
            lottery.prize = Math.floor(Math.random()*8)

        } else {
            if(lottery.times > lottery.cycle + 10 && ((lottery.prize === 0 && lottery.index === 7) || lottery.prize === lottery.index + 1)) {
                lottery.speed += 110
            } else {
                lottery.speed += 20
            }
        }
        if(lottery.speed < 40) {
            lottery.speed = 40
        }
        //循环调用
        lottery.timer = setTimeout(roll, lottery.speed)
    }
    return false
}

参考资料

https://www.jb51.net/article/103122.htm