js 简单抽奖实现

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

html代码如下：

<!DOCTYPE HTML>
<html lang="en-US">
<head>
    <meta charset="UTF-8">
    <title></title>
    <style type="text/css">
    ul{list-style:none;}
    li{display:inline-block; border:1px solid #000;}
    span{display:inline-block; padding:10px 15px;}
    li .lottery_yeah{background:red;}
    </style>
    <script type="text/javascript" src="http://code.jquery.com/jquery-1.8.1.min.js"></script>
</head>
<body>
    <input type="button" id="btn" value="button" />
    <ul id="la" class="lottery_all">
        <li><span eid="0" class="lottery_box">1</span></li>
        <li><span eid="1" class="lottery_box">2</span></li>
        <li><span eid="2" class="lottery_box">3</span></li>
        <li><span eid="3" class="lottery_box">4</span></li>
        <li><span eid="4" class="lottery_box">5</span></li>
        <li><span eid="5" class="lottery_box">6</span></li>
        <li><span eid="6" class="lottery_box">7</span></li>
        <li><span eid="7" class="lottery_box">8</span></li>
        <li><span eid="8" class="lottery_box">9</span></li>
    </ul>
    <script type="text/javascript" src="cj.js"></script>
</body>
</html>

 

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抽奖的代码，至于抽奖布局的话，大家就看着处理吧。大家看到有更好的实现方法，欢迎留言或者联系我，一起学习！

 posted on 2013-11-13 12:58  琦恒  阅读(9932)  评论(0)  编辑  收藏  举报