大家在很多活动页面上都看到绚丽多彩的抽奖运用，网上也有比较多关于这方面的js和用as。今天我在工作的时候也要做个抽奖的运用。我之前没有写过这类的js，也不会as，就得屁颠屁颠的问度娘啦，虽然找到有js写的也有用框架做的，研究了下，觉得忒复杂。突然想到之前公司有个简单实现的抽奖js。就要拿过来看看，结合自己的需求封装成一个类。

html代码如下：

    
                         
     
        
      
1
        
      
2
        
      
3
        
      
4
        
      
5
        
      
6
        
      
7
        
      
8
        
      
9
    
     
    

 

js代码如下：

/** 抽奖封装对象* @class LuckyDraw* @param { Number } 抽奖悬停号码 * @method LuckyDraw.tigerMac* @param { Number, Function } 运动步伐间距，回调函数**/function LuckyDraw( numId ) {    if ( this instanceof LuckyDraw ) {        this.rewardId = numId;        this.timer = null;    } else {        return new LuckyDraw( numId );    }}LuckyDraw.prototype.tigerMac = function( iStep, callback ) {    var speed = 200 / iStep, // 时间间隔        $luckyItem = $('#la .lottery_box'),        len = $luckyItem.length,        index = 0, // 索引值        _this = this;            $luckyItem.removeClass('lottery_yeah').eq( index ).addClass('lottery_yeah');        this.timer = setInterval(function () {        if ( index + 1 > len ) {            index = 0;            iStep++;            clearInterval( _this.timer );            _this.tigerMac( iStep, callback );        } else {            if ( iStep >= 6 ) {                if ( _this.rewardId && $luckyItem.eq( index ).attr('eid') == _this.rewardId ) {                    $luckyItem.eq( index ).addClass('lottery_yeah');                    clearInterval( _this.timer );                    if ( callback && typeof callback === 'function' ) {                        callback.call( $luckyItem[index] );                    }                    return                }            }            index++;        }        $luckyItem.removeClass('lottery_yeah').eq(index).addClass('lottery_yeah');    }, speed)};// 抽奖$('#btn').click(    (function(){        var n = 3,            aLuckyNum = [2, 5, 8],            oCj = null;                    return function() {            if ( n ) {                oCj = new LuckyDraw( aLuckyNum[n - 1] );                n--;                oCj.tigerMac( 1, function(){                    if ( Number( $(this).text() ) === 6 ) {                        alert('恭喜中奖啦！你还有' + n + '次抽奖机会哦！');                    } else if ( n ) {                        alert('^ @ ^ 没中奖，加油！你还有' + n + '次抽奖机会哦！');                    } else {                        alert('^ @ ^ 没中奖！谢谢参与');                    }                } );                oCj = null;            }else {                alert('你没有抽奖机会啦');            }        }    })());

以上就是整个js抽奖的代码，至于抽奖布局的话，大家就看着处理吧。大家看到有更好的实现方法，欢迎留言或者联系我，一起学习！