大家在很多活动页面上都看到绚丽多彩的抽奖运用，网上也有比较多关于这方面的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抽奖的代码，至于抽奖布局的话，大家就看着处理吧。大家看到有更好的实现方法，欢迎留言或者联系我，一起学习！