代码如下： <!DOCTYPE html><html> <head> <meta charset="utf-8"> <meta name="viewport" co ...
代码如下：
<!DOCTYPE html><html> <head> <meta charset="utf-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0, user-scalable=0, minimum-scale=1.0, maximum-scale=1.0" <title></title> <script type="text/javascript" src='/images/loading.gif' data-original="js/jquery-1.8.2.js" ></script> <script type="text/javascript"> var roll={ Msgs:["一等獎","二等獎","三等獎","四等獎","五等獎","六等獎","七等獎","八等獎"], index:0,//当前位置索引 times:0,//次数 roundTimes:0,//圈数 timer:0,//循环器 speed:300,//转动速度 isActive:false,//游戏是否在运行 Init:function(){ ///初始化 this.roundTimes=0; this.isActive=true; }, Start:function(cls,callback){ var that=this; if(that.isActive==true) { alert('游戏正在进行!'); return; } if(that.times==4) { alert('只有四次机会'); return; } that.Init(); var interVal=setInterval(function(){ if(that.index==8) { that.index=0; that.roundTimes++; } if(that.roundTimes==6) { that.index=parseInt(Math.random()*7) ; $('li[class^='+cls+']').removeClass('active'); $('.'+cls+'-'+ that.index).addClass('active'); that.isActive=false; clearInterval(that.timer); if(Object.prototype.toString.call(callback)=='[object Function]') { callback.call(this,that.index,that.Msgs[that.index]); } } else{ $('li[class^='+cls+']').removeClass('active'); $('.'+cls+'-'+ that.index).addClass('active'); that.index++; } },100); that.timer=interVal; that.times++; } } $(function(){ $('#btnChouj').click(function(){ roll.Start('prize',function(index,msg){ setTimeout(function(){ alert(msg); }) }); }); }) </script> <style type="text/css"> html,body{ margin:0 auto; padding: 0; width: 100%; height: 100%; } #choujiangUL{ list-style: none; position: absolute; width: 100%; height: 50%; } #choujiangUL li{ float: left; width: 32%; /* height: 33.33%;*/ text-align: center; border: 1px solid #CCCCCC /*background-color: deepskyblue;*/ /*border: 1px solid white;*/ } #choujiangUL li img{ width: 100px; height: 100px; } .active{ background-color: #990000; } </style> </head> <body> <ul id="choujiangUL"> <li > <img src='/images/loading.gif' data-original="img/choujiang/1.png" /> </li> <li > <img src='/images/loading.gif' data-original="img/choujiang/2.png" /> </li> <li > <img src='/images/loading.gif' data-original="img/choujiang/3.png" /> </li> <li > <img src='/images/loading.gif' data-original="img/choujiang/4.png" /> </li> <li id="btnChouj" > <img src='/images/loading.gif' data-original="img/choujiang/choujiang.png" /> </li> <li > <img src='/images/loading.gif' data-original="img/choujiang/5.png" /> </li> <li > <img src='/images/loading.gif' data-original="img/choujiang/6.png" /> </li> <li > <img src='/images/loading.gif' data-original="img/choujiang/7.png" /> </li> <li > <img src='/images/loading.gif' data-original="img/choujiang/8.png" /> </li> </ul> </body></html>
原标题：WebApp 九宫格抽奖简易demo
关键词：web
*特别声明：以上内容来自于网络收集，著作权属原作者所有，如有侵权，请联系我们：
admin#shaoqun.com
（#换成@）。
