首页 > 代码库 > javascript-实现小抽奖程序

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>

其中奖品结果,奖品信息,可配置,方便修改。 

javascript-实现小抽奖程序