javascript-实现小抽奖程序

<style>
*{ margin: 0; padding:0;}
.prize_wrap{
width: 300px;
height: 150px;
}
.prize_wrap .active{
position: absolute;
width: 100px;
height: 50px;
background: #f00;
line-height: 50px;
text-align: center;
border:solid 1px #999;
margin:-1px;
}
.prize_cell,
.prize_btn{
position: absolute;
background:#ccc;
width: 100px;
height: 50px;
line-height: 50px;
text-align: center;
}
.prize_btn{
background:#f0f;
cursor: pointer;
}
</style>
<div class="prize_wrap" id="prize_wrap">
<div class="prize_cell" style="left:0;top:0">1</div>
<div class="prize_cell" style="left:100px;top:0">2</div>
<div class="prize_cell" style="left:200px;top:0">3</div>
<div class="prize_cell" style="left:200px;top:50px">4</div>
<div class="prize_btn"	style="left:100px;top:50px" id="prize_start">抽奖开始</div>
<div class="prize_cell" style="left:200px;top:100px">5</div>
<div class="prize_cell" style="left:100px;top:100px">6</div>
<div class="prize_cell" style="left:0;top:100px">7</div>
<div class="prize_cell" style="left:0;top:50px">8</div>

</div>
<script>
//构造函数
var prizeScroll=(function(doc){
function _getItemsFilterCls(cls,items){
var ret=[];
for(var i=0,len=items.length;i<len;i++){
if(items[i].className.indexOf(cls)>-1){
ret.push(items[i]);
}
}
return ret;
}
return function(opt){
this.wrap=doc.getElementById(opt.id)||doc.body;
this.items=opt.items||_getItemsFilterCls(opt.id.replace('_wrap','')+'_cell',this.wrap.getElementsByTagName('*'));
this.btn=doc.getElementById(opt.btn);
this.curClass=opt.curClass||'active';
this.prizeNum=-1;
this.curIdx=0;
this.interval=null;
this.queue=[100,50,30,50,100,150];//转速
this.queue.gid=0;//转圈数
this.callBack=opt.callBack||function(){};
this.init();
}
})(document);

//工具方法
prizeScroll.log=function(msg){
if(console&&console.log){
console.log(msg);
}else{
alert(msg);
}
}

prizeScroll.prototype.init=function(){
//初始化
//prizeScroll.log('init');
}

prizeScroll.prototype._setInterval=function(timer,stopNum){
//滚动动画
var _self=this,len=stopNum||_self.items.length;
_self._clearInterval();
_self.interval=setInterval(function(){
if(_self.curIdx>len-1){
_self._clearInterval();
_self._next();
return;
}
_self._setActive(_self.curIdx);
_self.curIdx++;
},timer);
}
prizeScroll.prototype._setActive=function(idx){
//设置中奖状态
for(var i=0,len=this.items.length;i<len;i++){
this.items[i].className='prize_cell';
}
this.items[idx].className='active';
}

prizeScroll.prototype._clearInterval=function(){
//清除动画
var _self=this;
_self.interval&&clearInterval(_self.interval);
}
prizeScroll.prototype.start=function(){
//开始
this._next();
}
prizeScroll.prototype._next=function(){
//动画排序
this.curIdx=0;
this.interval=null;
var time=this.queue[this.queue.gid];
if(this.queue.gid>this.queue.length-1){
this.callBack(this.prizeNum);
return;}
if(this.queue.gid===this.queue.length-1){
this._setInterval(time,this.getPrizeNum());//奖品设置
this.queue.gid++;
return;
}
this._setInterval(time);
this.queue.gid++;
}

prizeScroll.prototype.reset=function(){
//重置重新开始
this.stop();
this.queue.gid=0;
}
prizeScroll.prototype.getPrizeNum=function(){
//获取奖品号
return this.prizeNum;
}
prizeScroll.prototype.setPrizeNum=function(prizeNum){
//设置奖品号
this.prizeNum=prizeNum;
}
prizeScroll.prototype.stop=function(){
//停止
//prizeScroll.log('stop');
this._clearInterval();
}

var prizeAssembly={
"1":"**币10枚",
"2":"**币110枚",
"3":"**币10枚",
"4":"**币130枚",
"5":"**币160枚",
"6":"**币20枚",
"7":"**币60枚",
"8":"**币00枚"
}

var m=new prizeScroll({
id:'prize_wrap',
callBack:function(prizeNum){
alert("您中了 "+prizeAssembly[prizeNum]+" ");
}
})
document.getElementById('prize_start').onclick=function(){
m.setPrizeNum(1);
m.start();
//移除事件
document.getElementById('prize_start').onclick=null;
}

</script>