JS数字抽奖游戏实现方法

本文实例讲述了JS数字抽奖游戏实现方法。分享给大家供大家参考。具体实现方法如下：
<！doctype html><html><head><meta charset="utf-8"><title>新年网页抽奖程序</title><style type="text/css">* {margin:0; padding:0;}ul,li {list-style-type:none;}body {overflow:hidden;}#back {width:100%; height:100%;background:#f5f5f5; position:absolute; z-index:1;}#box {width:360px; height:100px;position:absolute; z-index:3; top:50%; left:50%;margin-top:-50px; margin-left:-180px; text-align:center;}#box1,#box2,#box3 {width:100px; height:100px;line-height:100px;float:left; background:#321c24; border:10px #321c24 solid;border-radius:50%; position:relative; overflow:hidden;}#box1 ul,#box2 ul,#box3 ul {color:#fff; font-size:68px; font-family:"Arial Black"; text-align:center;width:100px; height:100px; line-height:100px;position:absolute; top:0; left:0;}#box1 ul li,#box2 ul li,#box3 ul li {width:100px; height:100px;background:red; border-radius:50%;}</style><script type="text/javascript">var AIR = { $: function （id） {return typeof id === "string" ? document.getElementById（id） : id; },$$: function （elem, oParent） {return （oParent || document）.getElementsByTagName（elem）; }, addEvent: function （oElement, sEvent, fnHandler）{oElement.addEventListener ? oElement.addEventListener（sEvent, fnHandler, false） : oElement.attachEvent（"on" + sEvent, fnHandler）}, removeEvent: function （oElement, sEvent, fnHandler）{oElement.removeEventListener ? oElement.removeEventListener（sEvent, fnHandler, false） : oElement.detachEvent（"on" + sEvent, fnHandler） },getElementClient: function （）{var arr = [];if （document.documentElement && document.documentElement.clientHeight && document.documentElement.clientWidth）{ arr.push（document.documentElement.clientWidth）; arr.push（document.documentElement.clientHeight）; return arr;} }, getStyle: function （obj, attr） {return parseFloat（obj.currentStyle ? obj.currentStyle[attr] : getComputedStyle（obj, null）[attr]） }, startMove: function （obj, pos, onEnd） {clearInterval（obj.timer）;var _this = this;obj.timer = setInterval（function （）{ _this.doMove（obj, pos, onEnd）}, 30）}, doMove: function （obj, pos, onEnd） {var iCurL = this.getStyle（obj, "left"）;var iCurT = this.getStyle（obj, "top"）;var iSpeedL = （pos.left - iCurL） / 5;var iSpeedT = （pos.top - iCurT） / 5;iSpeedL = iSpeedL > 0 ? Math.ceil（iSpeedL） : Math.floor（iSpeedL）;iSpeedT = iSpeedT > 0 ? Math.ceil（iSpeedT） : Math.floor（iSpeedT）;if （pos.left == iCurL && pos.top == iCurT）{ clearInterval（obj.timer）; onEnd && onEnd（）}else{ obj.style.left = iCurL + iSpeedL + "px"; obj.style.top = iCurT + iSpeedT + "px"; } }}function Draw （obj, num）{ this.obj = obj; this.num = num; this.data = []; this.result = []; this.show = 0; this.btn = true; this.timer = true; this.h = 0; this.uh = 0; this.initialize（）;}Draw.prototype = { initialize: function （） {this.createArr （）;this.createElement （）;this.closeEvent （）;this.startDraw （）;}, createElement: function （） {for（var j=0; j<this.obj.length; j++）{var ul = document.createElement（"ul"）; for（var i=0; i<10; i++）{var li = document.createElement（"li"）;li.innerHTML = i;ul.appendChild（li）}this.obj[j].appendChild（ul）; this.obj[j].btn = true; AIR.$$（"ul",this.obj[j]）[0].innerHTML += AIR.$$（"ul",this.obj[j]）[0].innerHTML;} var UL = AIR.$$（"ul",this.obj[0]）[0];this.h = AIR.getStyle（AIR.$$（"li",UL）[0],"height"）;this.uh = AIR.$$（"li",UL）.length * this.h }, randomSort: function （a, b） {return Math.random（）>.5 ? -1 : 1; }, createArr: function （） {for（var i=0; i<this.num+1; i++）{ this.data.push（i）; } this.data.sort（this.randomSort）;}, closeEvent: function （） {document.onmousedown=document.onmousemove=document.oncontextmenu=function（）{ return false; } }, startDraw: function （） {var _this = this;document.onkeyup = function （ ev ）{ var ev = ev || window.event; if（ev.keyCode == 13 || ev.keyCode == 32）{if（_this.btn && _this.timer）{ if（_this.obj[_this.obj.length-1].btn）{_this.Play （）;_this.btn = ！_this.btn;_this.timer = ！_this.timer;}}else{ if（_this.obj[_this.obj.length-1].btn）{_this.Stop （）;_this.btn = ！_this.btn;_this.timer = ！_this.timer;}}return false; }else{return false;}} }, Play: function （） {if（this.timer && this.btn）{ var t = 0; for（var i=0; i<this.obj.length; i++）{this.obj[i].btn = false;this.playTimer （this.obj[i],t）; t += 1500; }}else{ return false; } }, playTimer: function （obj,t） {var _this = this;setTimeout（function（）{ _this.Move （obj）;},t）}, Del: function （a） {for（var i=0; i<this.data.length; i++）{ if（a == this.data[i]）{this.data.splice（i,1）;} }}, Stop: function （） {if（！this.timer && ！this.btn）{ var n = this.num + 1; var r = this.data[Math.floor（Math.random（） * （0-n） + n）]; this.show = r; this.Del （r）; r = r.toString（）.split（""）; var c = this.obj.length - r.length; if（r.length < this.obj.length）{for（var i=0; i<c; i++）{ r.unshift（0） }} this.result = r;//document.title = r+" : "+this.data;var t = 0; for（var i=0; i<this.obj.length; i++）{this.obj[i].btn = false;this.obj[i].index = i;this.obj[i].num = this.result[this.obj[i].index];this.stopTimer （this.obj[i],t）; t += 1500; }} }, stopTimer: function （obj,t） {var _this = this;setTimeout（function（）{ _this.showResult （obj）;},t） }, showResult: function （obj） { var _this = this;this.timer = true;this.btn = true;obj.btn = false;obj.vh = -obj.num * this.h;obj.timeOut = setInterval（function（）{ obj.speed -= 1; if（obj.speed == 1）{clearInterval（obj.timeOut）; clearInterval（obj.timer）;obj.timer = setInterval（function（）{ if（obj.ul.offsetTop >= obj.vh）{clearInterval（obj.timer）;AIR.startMove（obj.ul,{left:0,top:obj.vh},function（）{ obj.btn = true;var set = true; for（var i=0; i<_this.obj.length; i++）{if（！_this.obj[i].btn）{ set = false;} } if（set）{_this.Open（_this.show）}}）; } obj.ul.style.top = obj.ul.offsetTop + obj.speed +"px"; },30）; }},100）; }, Open: function （num） {document.title += " "+ num; }, Move: function （obj） {var _this = this;var obj = obj;obj.btn = false;obj.timer = null;obj.speed = 1;obj.ul = AIR.$$（"ul",obj）[0];obj.ul.style.height = this.uh +"px";obj.timer = setInterval（function（）{ if（obj.ul.offsetTop > 0）{obj.ul.style.top = -（_this.uh/2） +"px"; } obj.ul.style.top = obj.ul.offsetTop + obj.speed +"px"; },30）;obj.timeOut = setInterval（function（）{ obj.speed += 1; if（obj.speed == 30）{clearInterval（obj.timeOut）;obj.btn = true;}},300）}}var initialize = function （）{ new Draw （[AIR.$（"box1"）,AIR.$（"box2"）,AIR.$（"box3"）],100）; reSize （）;}var reSize = function （）{ var v = AIR.getElementClient（）; AIR.$$（"img",AIR.$（"back"））[0].width = v[0]; AIR.$$（"img",AIR.$（"back"））[0].height = v[1]; }AIR.addEvent（window,"load",initialize）;AIR.addEvent（window,"resize",reSize）;</script></head><body><div id="box"> <div id="box1"></div> <div id="box2"></div> <div id="box3"></div> <div style="clear:both"></div></div><div id="back"> <img src="images/20153291274950386.jpg" /></div><div id="showback">100</div></body></html>
希望本文所述对大家的javascript程序设计有所帮助。