JS烟花背景效果实现方法

本文实例讲述了射流研究…烟花背景效果实现方法。分享给大家供大家参考。具体实现方法如下：

复制代码代码如下：DOCTYPE html PUBLIC '-//W3C//DTD XHTML 1.0 Transitional//EN ' ' http://www .w3。org/TR/XHTML 1/DTD/XHTML 1-Transitional。DTD ' html xmlns=' http://www .w3。org/1999/XHTML ' hearteta http-equiv=' Content-Type ' Content=' text/html；charset=utf-8' /title又一个很酷的射流研究…烟花背景特效/title脚本类型=' text/JavaScript ' var fireworks=function(){ this。大小=20；这个。上升()；}烟花。原型={ color : function(){ var c=[' 0 '，' 3 '，' 6 '，' 9 '，' c '，' f ']；var t=[c[数学。地板(数学。random()* 100)% 6]，' 0 '，' f ']；排序(函数(){返回数学。随机()0.5？-1:1;});返回" # " t . join(" ")；}，a heat : function(){ var h=document。文档元素。客户端高度-250；返回数学。ABS(数学。地板(数学。random()* h-200))201；}，火裂：函数(){ var b=document。创建元素(' div ')；var w=文档。文档元素。客户端宽度；' b.style.position='绝对；风格。颜色=这个。color()；风格。底部=0；风格。左=数学。地板(数学。random()* w)1 ' px '；文件。尸体。附录b；返回b；}，上升：函数(){ var o=this。bucket()；var n=这个。a heat()；var c=this . color var e=this . exp var s=this . sizevar k=n；var m=function(){ o . style。bottom=parseFloat(o . style。底部)k * 0.1 ' pxk-=k * 0.1；if(k2){ clearInterval(清除);e(o、n、s、c)；} } o.innerHTML=' .if(ParSeint(o . style。底部)n){ var clear=设置间隔(m，20)；}}，expl:function(o，n，s，c){ var R=n/3，Ri=n/6，Rii=n/9；var r=0，ri=0，rii=0；for(var I=0；是；I){ var span=文档。创建元素(“span”)；var p=文档。创建元素(' I ')；var a=文档。创建元素(' a ')；span.style.position='绝对；跨度。风格。font size=n/10 ' px '；跨度。风格。left=0；跨度。风格。top=0；span . innerHTMl=' * p . style . position='绝对；p .风格。left=0；p .风格。top=0；p . innerHTMl=' * a . style . position='绝对；风格。left=0；风格。top=0；a . innerHTMl=' * o . append child(span)；附录(p );附录(a );}函数SPR(){ R=R * 0.1；Ri=Ri * 0.06 Rii=Rii * 0.06 sp=o . getelementsbytagname(' span ')；p=o . getelementsbytagname(' I ')；a=o . getelementsbytagname(' a ')；for(var I=0；isp.lengthI){ sp[I]。风格。color=c()；p[I]。风格。color=c()；一[我]。风格。color=c()；sp[I]。风格。左=r *数学。cos(360/s * I)‘px’；sp[I]。风格。top=r *数学。sin(360/s * I)‘px’；sp[I]。风格。font size=parseFloat(sp[I])。风格。字号)* 0.96 ' pxp[I]。风格。左=ri *数学。cos(360/s * I)‘px’；p[I]。风格。top=ri *数学。sin(360/s * I)‘px’；p[I]。风格。font size=parseFloat(sp[I])。风格。字号)* 0.96 ' px一[我]。风格。左=rii *数学。cos(360/s * I)‘px’；一[我]。风格。top=rii *数学。sin(360/s * I)‘px’；一[我]。风格。font size=parseFloat(sp[I])。风格。字号)* 0.96 ' px} R-=R * 0.1；if(R2){ o . innerhtml=' '；父节点。移除子(o)；clearInterval(Cleari)；} } var clearI=setInterval(spr，20)；} }窗口。onload=function(){ function happyNewYear(){ new fireworks()；}setInterval(happyNewYear，1000)；}/脚本样式类型=' text/CSS '/style/head body style=' background : # 000；font:12px Georgia，' Times New Roman '，Times，serif'/body/html

运行效果如下所示：

希望本文所述对大家的爪哇岛描述语言程序设计有所帮助。