JS基于面向对象实现的放烟花效果
本文实例讲述了JS基于面向对象实现的放烟花效果。分享给大家供大家参考。具体实现方法如下：
<!DOCTYPEhtmlPUBLIC"-//W3C//DTDXHTML1.0Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<htmlxmlns="http://www.w3.org/1999/xhtml">
<head>
<metahttp-equiv="Content-Type"content="text/html;charset=utf-8"/>
<title>js放烟花效果（面向对象版）</title>
<styletype="text/css">
html,body{overflow:hidden;}
body,div,p{margin:0;padding:0;}
body{background:#000;font:12px/1.5arial;color:#7A7A7A;}
a{text-decoration:none;outline:none;}
#tips,#copyright{position:absolute;width:100%;height:50px;text-align:center;background:#171717;border:2pxsolid#484848;}
#tips{top:0;border-width:002px;}
#tipsa{font:14px/30pxarial;color:#FFF;background:#F06;display:inline-block;margin:10px5px0;padding:015px;border-radius:15px;}
#tipsa.active{background:#FE0000;}
#copyright{bottom:0;line-height:50px;border-width:2px00;}
#copyrighta{color:#FFF;background:#7A7A7A;padding:2px5px;border-radius:10px;}
#copyrighta:hover{background:#F90;}
p{position:absolute;top:55px;width:100%;text-align:center;}
</style>
<scripttype="text/javascript">
varfgm={
on:function(element,type,handler){
returnelement.addEventListener?element.addEventListener(type,handler,false):element.attachEvent("on"+type,handler)
},
un:function(element,type,handler){
returnelement.removeEventListener?element.removeEventListener(type,handler,false):element.detachEvent("on"+type,handler)
},
bind:function(object,handler){
returnfunction(){
returnhandler.apply(object,arguments)
}
},
randomRange:function(lower,upper){
returnMath.floor(Math.random()*(upper-lower+1)+lower)
},
getRanColor:function(){
varstr=this.randomRange(0,0xFFFFFF).toString(16);
while(str.length<6)str="0"+str;
return"#"+str
}
};
//初始化对象
functionFireWorks(){
this.type=0;
this.timer=null;
this.fnManual=fgm.bind(this,this.manual)
}
FireWorks.prototype={
initialize:function(){
clearTimeout(this.timer);
fgm.un(document,"click",this.fnManual);
switch(this.type){
case1:
fgm.on(document,"click",this.fnManual);
break;
case2:
this.auto();
break;
};
},
manual:function(event){
event=event||window.event;
this.__create__({
x:event.clientX,
y:event.clientY
});
},
auto:function()
{
varthat=this;
that.timer=setTimeout(function(){
that.__create__({
x:fgm.randomRange(50,document.documentElement.clientWidth-50),
y:fgm.randomRange(50,document.documentElement.clientHeight-150)
})
that.auto();
},fgm.randomRange(900,1100))
},
__create__:function(param)
{
varthat=this;
varoEntity=null;
varoChip=null;
varaChip=[];
vartimer=null;
varoFrag=document.createDocumentFragment();
oEntity=document.createElement("div");
with(oEntity.style){
position="absolute";
top=document.documentElement.clientHeight+"px";
left=param.x+"px";
width="4px";
height="30px";
borderRadius="4px";
background=fgm.getRanColor();
};
document.body.appendChild(oEntity);
oEntity.timer=setInterval(function(){
oEntity.style.top=oEntity.offsetTop-20+"px";
if(oEntity.offsetTop<=param.y){
clearInterval(oEntity.timer);
document.body.removeChild(oEntity);
(function(){
//在50-100之间随机生成碎片
//由于IE浏览器处理效率低,随机范围缩小至20-30
//自动放烟花时,随机范围缩小至20-30
varlen=(/msie/i.test(navigator.userAgent)||that.type==2)?fgm.randomRange(20,30):fgm.randomRange(50,100)
for(i=0;i<len;i++){
oChip=document.createElement("div");
with(oChip.style){
position="absolute";
top=param.y+"px";
left=param.x+"px";
width="4px";
height="4px";
overflow="hidden";
borderRadius="4px";
background=fgm.getRanColor();
};
oChip.speedX=fgm.randomRange(-20,20);
oChip.speedY=fgm.randomRange(-20,20);
oFrag.appendChild(oChip);
aChip[i]=oChip
};
document.body.appendChild(oFrag);
timer=setInterval(function(){
for(i=0;i<aChip.length;i++){
varobj=aChip[i];
with(obj.style){
top=obj.offsetTop+obj.speedY+"px";
left=obj.offsetLeft+obj.speedX+"px";
};
obj.speedY++;
(obj.offsetTop<0||obj.offsetLeft<0||obj.offsetTop>document.documentElement.clientHeight||obj.offsetLeft>document.documentElement.clientWidth)&&(document.body.removeChild(obj),aChip.splice(i,1))
};
!aChip[0]&&clearInterval(timer);
},30)
})()
}
},30)
}
};
fgm.on(window,"load",function(){
varoTips=document.getElementById("tips");
varaBtn=oTips.getElementsByTagName("a");
varoFireWorks=newFireWorks();
fgm.on(oTips,"click",function(event){
varoEvent=event||window.event;
varoTarget=oEvent.target||oEvent.srcElement;
vari=0;
if(oTarget.tagName.toUpperCase()=="A"){
for(i=0;i<aBtn.length;i++)aBtn[i].className="";
switch(oTarget.id){
case"manual":
oFireWorks.type=1;
break;
case"auto":
oFireWorks.type=2;
break;
case"stop":
oFireWorks.type=0;
break;
}
oFireWorks.initialize();
oTarget.className="active";
oEvent.stopPropagation?oEvent.stopPropagation():oEvent.cancelBubble=true
}
});
});
fgm.on(document,"contextmenu",function(event){
varoEvent=event||window.event;
oEvent.preventDefault?oEvent.preventDefault():oEvent.returnValue=false
});
</script>
</head>
<body>
<divid="tips"><aid="manual"href="javascript:;">手动放烟花</a><aid="auto"href="javascript:;">自动放烟花</a><aid="stop"href="javascript:;">停止放烟花</a></div>
<p>由于浏览器渲染能力有限,当浏览器为IE或选择自动放烟花时,随机生成的烟花碎片范围自动调整至20-30</p>
<divid="copyright">建议使用Firefox,Chrome浏览器预览效果.By—Ferris,QQ:21314130</div>
</body>
</html>
希望本文所述对大家的javascript程序设计有所帮助。