首页 > 代码库 > 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-实现小抽奖程序
声明:以上内容来自用户投稿及互联网公开渠道收集整理发布,本网站不拥有所有权,未作人工编辑处理,也不承担相关法律责任,若内容有误或涉及侵权可进行投诉: 投诉/举报 工作人员会在5个工作日内联系你,一经查实,本站将立刻删除涉嫌侵权内容。