JS数字抽奖游戏实现方法
本文实例讲述了JS数字抽奖游戏实现方法。分享给大家供大家参考。具体实现方法如下：
<!doctypehtml>
<html>
<head>
<metacharset="utf-8">
<title>新年网页抽奖程序</title>
<styletype="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#321c24solid;
border-radius:50%;position:relative;overflow:hidden;
}
#box1ul,#box2ul,#box3ul{color:#fff;font-size:68px;
font-family:"ArialBlack";text-align:center;
width:100px;height:100px;line-height:100px;
position:absolute;top:0;left:0;
}
#box1ulli,#box2ulli,#box3ulli{
width:100px;height:100px;
background:red;border-radius:50%;
}
</style>
<scripttype="text/javascript">
varAIR={
$:function(id)
{
returntypeofid==="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(){
vararr=[];
if(document.documentElement&&document.documentElement.clientHeight&&document.documentElement.clientWidth){
arr.push(document.documentElement.clientWidth);
arr.push(document.documentElement.clientHeight);
returnarr;
}
},
getStyle:function(obj,attr)
{
returnparseFloat(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)
{
variCurL=this.getStyle(obj,"left");
variCurT=this.getStyle(obj,"top");
variSpeedL=(pos.left-iCurL)/5;
variSpeedT=(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";
}
}
}
functionDraw(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(varj=0;j<this.obj.length;j++){
varul=document.createElement("ul");
for(vari=0;i<10;i++){
varli=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;
}
varUL=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){
returnMath.random()>.5?-1:1;
},
createArr:function()
{
for(vari=0;i<this.num+1;i++){
this.data.push(i);
}
this.data.sort(this.randomSort);
},
closeEvent:function()
{
document.onmousedown=document.onmousemove=document.oncontextmenu=function()
{
returnfalse;
}
},
startDraw:function()
{
var_this=this;
document.onkeyup=function(ev)
{
varev=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;
}
}
returnfalse;
}else{
returnfalse;
}
}
},
Play:function()
{
if(this.timer&&this.btn){
vart=0;
for(vari=0;i<this.obj.length;i++){
this.obj[i].btn=false;
this.playTimer(this.obj[i],t);
t+=1500;
}
}else{
returnfalse;
}
},
playTimer:function(obj,t)
{
var_this=this;
setTimeout(function(){
_this.Move(obj);
},t)
},
Del:function(a)
{
for(vari=0;i<this.data.length;i++){
if(a==this.data[i]){
this.data.splice(i,1);
}
}
},
Stop:function()
{
if(!this.timer&&!this.btn){
varn=this.num+1;
varr=this.data[Math.floor(Math.random()*(0-n)+n)];
this.show=r;
this.Del(r);
r=r.toString().split("");
varc=this.obj.length-r.length;
if(r.length<this.obj.length){
for(vari=0;i<c;i++){
r.unshift(0)
}
}
this.result=r;
//document.title=r+":"+this.data;
vart=0;
for(vari=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;
varset=true;
for(vari=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;
varobj=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)
}
}
varinitialize=function()
{
newDraw([AIR.$("box1"),AIR.$("box2"),AIR.$("box3")],100);
reSize();
}
varreSize=function()
{
varv=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>
<divid="box">
<divid="box1"></div>
<divid="box2"></div>
<divid="box3"></div>
<divstyle="clear:both"></div>
</div>
<divid="back">
<imgsrc="images/20153291274950386.jpg"/>
</div>
<divid="showback">100</div>
</body>
</html>
希望本文所述对大家的javascript程序设计有所帮助。