javascript-implementation of the small Lottery program

Directly on the code

<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" > Draw 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>//constructor 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];//speed This.queue.gid =0;//number of Circles this.callback=opt.callback| | function () {};this.init ();}}) (document);//Tool Method Prizescroll.log=function (msg) {if (Console&&console.log) {console.log (msg);} Else{alert (msg);}} Prizescroll.prototype.init=function () {//Initialize//prizescroll.log (' init ');} Prizescroll.prototype._setintervaL=function (Timer,stopnum) {//Scrolling animation 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) {//Set winning status 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 () {//Clear animation Var _self=this;_self.interval&&clearinterval (_ Self.interval);} Prizescroll.prototype.start=function () {//Start this._next ();} Prizescroll.prototype._next=function () {//animation sort 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 ());//prizes set this.queue.gid++; return;} This._setinterval (time); this.queue.gid++;} PrizeScroll.prototype.resEt=function () {//Reset restart This.stop (); this.queue.gid=0;} Prizescroll.prototype.getprizenum=function () {//Get the prize number return this.prizenum;} Prizescroll.prototype.setprizenum=function (Prizenum) {//Set the prize number This.prizenum=prizenum;} Prizescroll.prototype.stop=function () {//Stop//prizescroll.log (' Stop '); This._clearinterval ();} var prizeassembly={"1": "* * currency 10", "2": "* * Currency 110", "3": "* * currency 10", "4": "* * currency 130 pieces", "5": "* * currency 160", "6": "* * Currency 20", "7": "* * Currency 60 pieces "," 8 ":" * * coin 00 "}var m=new prizescroll ({id: ' Prize_wrap ', callback:function (prizenum) {alert (" You are in "+prizeassembly[ prizenum]+ "");}) document.getElementById (' Prize_start '). Onclick=function () {m.setprizenum (1); M.start ();// Remove event document.getElementById (' Prize_start '). Onclick=null;} </script>

Among the prizes, prizes, information, can be configured, easy to modify.

javascript-implementation of the small Lottery program