ES6公用跑马灯抽奖组件的封装及使用

前言

此组件为本人使用ES6封装的抽奖组件，以下只分享组件的实现及使用方法，不涉及业务相关代码。

Lottery.js

解释请看代码中的注释，如果不是太符合需求，可根据自己的使用场景适当扩展一下…

/**
 * Created by xieguoqiang on 29/03/2019.
 */
export default class Lottery {
    constructor (giftCount, key) {
        this.giftCount = giftCount   // 礼品个数
        this.key = key               // 要抽中哪个(内幕，你懂的)
        this.currentIndex = 1        // 当前索引
        this.currentCycle = 0        // 当前圈数
        this.cycles = 6,             // 跑的圈数
        this.speed =  200            // 速度，即定时器的时间间隔
        this.classPrefix = 'gift'    // 礼品名class前缀
        this.timer = 0               // 定时器
    }
    // 外部调用方法
    start () {
        return new Promise((resolve, reject) => {
            this.resolve = resolve // 缓存 resolve
            this.reject = reject   // 缓存 reject
            this.init()
        })
    }
    // 内部初始化
    init () {
        
        const before = this.currentIndex === 1 ? this.giftCount : this.currentIndex - 1
        
        //设置上一索引的类名
        const beforeNode = document.getElementsByClassName(this.classPrefix + before)[0]
        const beforeClassNewName = beforeNode.className.replace(' active','')
        beforeNode.className = beforeClassNewName
        //设置当前索引的类名
        const currentNode = document.getElementsByClassName(this.classPrefix + this.currentIndex)[0]
        currentNode.className += ' active'
        
        this.upSpeed()
        this.downSpeed()
        
        this.currentIndex += 1
        this.currentIndex = this.currentIndex > this.giftCount ? 1 : this.currentIndex        
    }
    // 加速
    upSpeed () {
        if (this.currentCycle < 2 && this.speed > 100){
            this.speed -= 5 * this.currentIndex 
            this.stop()
            this.run()
        }
    }
    // 减速
    downSpeed () {
        // 增加圈数
        if(this.currentIndex === this.giftCount){
            this.currentCycle += 1
        }
        // 如果当前所跑圈数小于总圈数-2 并且 速度小于400，那么减速
        if(this.currentCycle > this.cycles - 2 && this.speed < 400){
            this.speed += 20
            this.stop()
            this.run()
        }
        
        // 如果当前所跑圈数大于总圈数 且 索引值等于key，那么停止奔跑
        if(this.currentCycle > this.cycles && this.currentIndex === this.key){
            this.stop()
            this.resolveResult()
        }
    }
    // 停止
    stop() {
        clearInterval(this.timer)
    }
    // 跑动
    run () {
        this.timer = setInterval(() => {
            this.init()
        }, this.speed)
    }
    // 返回中奖索引
    resolveResult () {
        this.resolve(this.key)
    }
}

使用方法

①：import Lottery from ‘./Lottery’

dom结构

此组件所实现效果(录屏来源于互联网)