分享几种超漂亮的JS焰火

今天看到蓝色理想有几个哥们都发了自己写的烟花效果，弄的心里痒痒，自己也想写一个出来玩，结果把IE写死好几次，还是放弃了，这里转几个别人写的效果上来分享!

转自：http://www.ok22.org/art_detail.aspx?id=176(可直接运行)

Html代码运行

1. <script?type="text/javascript">??
2. ????var?fireworks?=?function(){ ??
3. ?????this.size?=?20; ??
4. ?????this.rise(); ??
5. ????} ??
6. ????fireworks.prototype?=?{ ??
7. ?????color:function(){ ??
8. ??????var?c?=?['0','3','6','9','c','f']; ??
9. ??????var?t?=?[c[Math.floor(Math.random()*100)%6],'0','f']; ??
10. ??????t.sort(function(){return?Math.random()>0.5?-1:1;}); ??
11. ??????return?'#'+t.join(''); ??
12. ?????}, ??
13. ?????aheight:function(){ ??
14. ??????var?h?=?document.documentElement.clientHeight-250; ??
15. ??????return?Math.abs(Math.floor(Math.random()*h-200))+201; ??
16. ?????}, ??
17. ?????firecracker:function(){ ??
18. ??????var?b?=?document.createElement('div'); ??
19. ??????var?w?=?document.documentElement.clientWidth; ??
20. ??????b.style.position?=?'absolute'; ??
21. ??????b.style.color?=?this.color(); ??
22. ??????b.style.bottom?=?0; ??
23. ??????b.style.left?=?Math.floor(Math.random()*w)+1+'px'; ??
24. ??????document.body.appendChild(b); ??
25. ??????return?b; ??
26. ?????}, ??
27. ?????rise:function(){ ??
28. ??????var?o?=?this.firecracker(); ??
29. ??????var?n?=?this.aheight(); ??
30. ??????var?c?=?this.color; ??
31. ??????var?e?=?this.expl; ??
32. ??????var?s?=?this.size; ??
33. ??????var?k?=?n; ??
34. ??????var?m?=?function(){ ??
35. ???????o.style.bottom?=?parseFloat(o.style.bottom)+k*0.1+'px'; ??
36. ???????kk-=k*0.1; ??
37. ???????if(k<2){ ??
38. ????????clearInterval(clear); ??
39. ????????e(o,n,s,c); ??
40. ???????} ??
41. ??????} ??
42. ??????o.innerHTML?=?'.'; ??
43. ??????if(parseInt(o.style.bottom)<n){ ??
44. ???????var?clear?=?setInterval(m,20); ??
45. ??????} ??
46. ?????}, ??
47. ?????expl:function(o,n,s,c){ ??
48. ??????var?R=n/3,Ri=n/6,Rii=n/9; ??
49. ??????var?r=0,ri=0,rii=0; ??
50. ??????for(var?i=0;i<s;i++){ ??
51. ???????var?span?=?document.createElement('span'); ??
52. ???????var?p?=?document.createElement('i'); ??
53. ???????var?a?=?document.createElement('a'); ??
54. ???????span.style.position?=?'absolute'; ??
55. ???????span.style.fontSize?=?n/10+'px'; ??
56. ???????span.style.left?=?0; ??
57. ???????span.style.top?=?0; ??
58. ???????span.innerHTML?=?'*'; ??
59. ???????p.style.position?=?'absolute'; ??
60. ???????p.style.left?=?0; ??
61. ???????p.style.top?=?0; ??
62. ???????p.innerHTML?=?'*'; ??
63. ???????a.style.position?=?'absolute'; ??
64. ???????a.style.left?=?0; ??
65. ???????a.style.top?=?0; ??
66. ???????a.innerHTML?=?'*'; ??
67. ???????o.appendChild(span); ??
68. ???????o.appendChild(p); ??
69. ???????o.appendChild(a); ??
70. ??????} ??
71. ??????function?spr(){ ??
72. ???????r?+=?R*0.1; ??
73. ???????ri+=?Ri*0.06; ??
74. ???????rii+=?Rii*0.06; ??
75. ???????sp?=?o.getElementsByTagName('span'); ??
76. ???????p?=?o.getElementsByTagName('i'); ??
77. ???????a?=?o.getElementsByTagName('a'); ??
78. ???????for(var?i=0;?i<sp.length;i++){ ??
79. ????????sp[i].style.color?=?c(); ??
80. ????????p[i].style.color?=?c(); ??
81. ????????a[i].style.color?=?c(); ??
82. ????????sp[i].style.left=r*Math.cos(360/s*i)+'px'; ??
83. ????????sp[i].style.top=r*Math.sin(360/s*i)+'px'; ??
84. ????????sp[i].style.fontSize=parseFloat(sp[i].style.fontSize)*0.96+'px'; ??
85. ????????p[i].style.left=ri*Math.cos(360/s*i)+'px'; ??
86. ????????p[i].style.top=ri*Math.sin(360/s*i)+'px'; ??
87. ????????p[i].style.fontSize=parseFloat(sp[i].style.fontSize)*0.96+'px'; ??
88. ????????a[i].style.left=rii*Math.cos(360/s*i)+'px'; ??
89. ????????a[i].style.top=rii*Math.sin(360/s*i)+'px'; ??
90. ????????a[i].style.fontSize=parseFloat(sp[i].style.fontSize)*0.96+'px'; ??
91. ???????} ??
92. ???????RR-=R*0.1; ??
93. ???????if(R<2){ ??
94. ????????o.innerHTML?=?''; ??
95. ????????o.parentNode.removeChild(o); ??
96. ????????clearInterval(clearI); ??
97. ???????} ??
98. ??????} ??
99. ??????var?clearI?=?setInterval(spr,20); ??
100. ?????} ??
101. ????} ??
102. ????window.onload?=?function(){ ??
103. ?????function?happyNewYear(){ ??
104. ??????new?fireworks(); ??
105. ?????} ??
106. ?????setInterval(happyNewYear,1000); ??
107. ????} ??
108. ????</script>??
109. ????<style?type="text/css">??
110. ????</style>??
111. ????</head>??
112. ????<body?style="background:#000;font:12px?Georgia,?'Times?New?Roman',?Times,?serif">??
113. ????</body>??
114. ????</html>??

<script type="text/javascript">
	var fireworks = function(){
	?this.size = 20;
	?this.rise();
	}
	fireworks.prototype = {
	?color:function(){
	??var c = ['0','3','6','9','c','f'];
	??var t = [c[Math.floor(Math.random()*100)%6],'0','f'];
	??t.sort(function(){return Math.random()>0.5?-1:1;});
	??return '#'+t.join('');
	?},
	?aheight:function(){
	??var h = document.documentElement.clientHeight-250;
	??return Math.abs(Math.floor(Math.random()*h-200))+201;
	?},
	?firecracker:function(){
	??var b = document.createElement('div');
	??var w = document.documentElement.clientWidth;
	??b.style.position = 'absolute';
	??b.style.color = this.color();
	??b.style.bottom = 0;
	??b.style.left = Math.floor(Math.random()*w)+1+'px';
	??document.body.appendChild(b);
	??return b;
	?},
	?rise:function(){
	??var o = this.firecracker();
	??var n = this.aheight();
	??var c = this.color;
	??var e = this.expl;
	??var s = this.size;
	??var k = n;
	??var m = function(){
	???o.style.bottom = parseFloat(o.style.bottom)+k*0.1+'px';
	???k-=k*0.1;
	???if(k<2){
	????clearInterval(clear);
	????e(o,n,s,c);
	???}
	??}
	??o.innerHTML = '.';
	??if(parseInt(o.style.bottom)<n){
	???var clear = setInterval(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<s;i++){
	???var span = document.createElement('span');
	???var p = document.createElement('i');
	???var a = document.createElement('a');
	???span.style.position = 'absolute';
	???span.style.fontSize = n/10+'px';
	???span.style.left = 0;
	???span.style.top = 0;
	???span.innerHTML = '*';
	???p.style.position = 'absolute';
	???p.style.left = 0;
	???p.style.top = 0;
	???p.innerHTML = '*';
	???a.style.position = 'absolute';
	???a.style.left = 0;
	???a.style.top = 0;
	???a.innerHTML = '*';
	???o.appendChild(span);
	???o.appendChild(p);
	???o.appendChild(a);
	??}
	??function 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; i<sp.length;i++){
	????sp[i].style.color = c();
	????p[i].style.color = c();
	????a[i].style.color = c();
	????sp[i].style.left=r*Math.cos(360/s*i)+'px';
	????sp[i].style.top=r*Math.sin(360/s*i)+'px';
	????sp[i].style.fontSize=parseFloat(sp[i].style.fontSize)*0.96+'px';
	????p[i].style.left=ri*Math.cos(360/s*i)+'px';
	????p[i].style.top=ri*Math.sin(360/s*i)+'px';
	????p[i].style.fontSize=parseFloat(sp[i].style.fontSize)*0.96+'px';
	????a[i].style.left=rii*Math.cos(360/s*i)+'px';
	????a[i].style.top=rii*Math.sin(360/s*i)+'px';
	????a[i].style.fontSize=parseFloat(sp[i].style.fontSize)*0.96+'px';
	???}
	???R-=R*0.1;
	???if(R<2){
	????o.innerHTML = '';
	????o.parentNode.removeChild(o);
	????clearInterval(clearI);
	???}
	??}
	??var clearI = setInterval(spr,20);
	?}
	}
	window.onload = function(){
	?function happyNewYear(){
	??new fireworks();
	?}
	?setInterval(happyNewYear,1000);
	}
	</script>
	<style type="text/css">
	</style>
	</head>
	<body style="background:#000;font:12px Georgia, 'Times New Roman', Times, serif">
	</body>
	</html>

Html代码运行

1. <!DOCTYPE?html?PUBLIC?"-//W3C//DTD?XHTML?1.0?Transitional//EN"?"<A?href="http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd</A>">??
2. <html?xmlns="<A?href="http://www.w3.org/1999/xhtml">http://www.w3.org/1999/xhtml</A>">??
3. <head>??
4. <meta?http-equiv="Content-Type"?content="text/html;?charset=utf-8"?/>??
5. <title>firework?-?Zehee</title>??
6. <script?type="text/javascript">??
7. var?firework?=?function(){ ??
8. ?this.size?=?40; ??
9. ?this.speed?=?0.1; ??
10. ?this.rise(); ??
11. } ??
12. firework.prototype?=?{ ??
13. ?color:function(){ ??
14. ??var?c?=?['0','3','6','9','c','f']; ??
15. ??var?t?=?[c[Math.floor(Math.random()*100)%6],'0','f']; ??
16. ??t.sort(function(){return?Math.random()>0.5?-1:1;}); ??
17. ??return?'#'+t.join(''); ??
18. ?}, ??
19. ?aheight:function(){ ??
20. ??var?h?=?document.documentElement.clientHeight; ??
21. ??return?Math.abs(Math.floor(Math.random()*h-200))+201; ??
22. ?}, ??
23. ?firecracker:function(){ ??
24. ??var?b?=?document.createElement('div'); ??
25. ??var?w?=?document.body.clientWidth; ??
26. ??b.style.color?=?this.color(); ??
27. ??b.style.position?=?'absolute'; ??
28. ??b.style.bottom?=?0; ??
29. ??b.style.left?=?Math.floor(Math.random()*w)+1+'px'; ??
30. ??document.body.appendChild(b); ??
31. ??return?b; ??
32. ?}, ??
33. ?rise:function(){ ??
34. ??var?o?=?this.firecracker(); ??
35. ??var?n?=?this.aheight(); ??
36. ??var?speed?=?this.speed; ??
37. ??var?e?=?this.expl; ??
38. ??var?s?=?this.size; ??
39. ??var?k?=?n; ??
40. ??var?m?=?function(){ ??
41. ???o.style.bottom?=?parseFloat(o.style.bottom)+k*speed+'px'; ??
42. ???kk-=k*speed; ??
43. ???if(k<2){ ??
44. ????clearInterval(clear); ??
45. ????e(o,n,s,speed); ??
46. ???} ??
47. ??} ??
48. ??o.innerHTML?=?'*'; ??
49. ??if(parseInt(o.style.bottom)<n){ ??
50. ???var?clear?=?setInterval(m,20); ??
51. ??} ??
52. ?}, ??
53. ?expl:function(o,n,s,speed){ ??
54. ??var?R?=?n/3; ??
55. ??var?Ri?=?n/6; ??
56. ??var?r?=?0; ??
57. ??var?ri?=?0; ??
58. ??for(var?i=0;i<s;i++){ ??
59. ???var?span?=?document.createElement('span'); ??
60. ???var?p?=?document.createElement('p'); ??
61. ???span.style.position?=?'absolute'; ??
62. ???span.style.left?=?0; ??
63. ???span.style.top?=?0; ??
64. ???span.innerHTML?=?'*'; ??
65. ???p.style.position?=?'absolute'; ??
66. ???p.style.left?=?0; ??
67. ???p.style.top?=?0; ??
68. ???p.innerHTML?=?'+'; ??
69. ???o.appendChild(span); ??
70. ???o.appendChild(p); ??
71. ??} ??
72. ??function?spr(){ ??
73. ???r?+=?R*speed; ??
74. ???ri+=?Ri*speed/2; ??
75. ???sp?=?o.getElementsByTagName('span'); ??
76. ???p?=?o.getElementsByTagName('p'); ??
77. ???for(var?i=0;?i<sp.length;i++){ ??
78. ????sp[i].style.left=r*Math.cos(360/s*i)+'px'; ??
79. ????sp[i].style.top=r*Math.sin(360/s*i)+'px'; ??
80. ????p[i].style.left=ri*Math.cos(360/s*i)+'px'; ??
81. ????p[i].style.top=ri*Math.sin(360/s*i)+'px'; ??
82. ???} ??
83. ???RR-=R*speed; ??
84. ???if(R<2){ ??
85. ????clearInterval(clearI); ??
86. ????o.parentNode.removeChild(o); ??
87. ???} ??
88. ??} ??
89. ??var?clearI?=?setInterval(spr,20); ??
90. ?} ??
91. } ??
92. window.onload?=?function(){ ??
93. ?function?happyNewYear(){ ??
94. ??new?firework(); ??
95. ?} ??
96. ?setInterval(happyNewYear,400); ??
97. } ??
98. </script>??
99. <style?type="text/css">??
100. </style>??
101. </head>??
102. <body?style="background:#000;font:12px?Arial">??
103. </body>??
104. </html>??

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>firework - Zehee</title>
<script type="text/javascript">
var firework = function(){
?this.size = 40;
?this.speed = 0.1;
?this.rise();
}
firework.prototype = {
?color:function(){
??var c = ['0','3','6','9','c','f'];
??var t = [c[Math.floor(Math.random()*100)%6],'0','f'];
??t.sort(function(){return Math.random()>0.5?-1:1;});
??return '#'+t.join('');
?},
?aheight:function(){
??var h = document.documentElement.clientHeight;
??return Math.abs(Math.floor(Math.random()*h-200))+201;
?},
?firecracker:function(){
??var b = document.createElement('div');
??var w = document.body.clientWidth;
??b.style.color = this.color();
??b.style.position = 'absolute';
??b.style.bottom = 0;
??b.style.left = Math.floor(Math.random()*w)+1+'px';
??document.body.appendChild(b);
??return b;
?},
?rise:function(){
??var o = this.firecracker();
??var n = this.aheight();
??var speed = this.speed;
??var e = this.expl;
??var s = this.size;
??var k = n;
??var m = function(){
???o.style.bottom = parseFloat(o.style.bottom)+k*speed+'px';
???k-=k*speed;
???if(k<2){
????clearInterval(clear);
????e(o,n,s,speed);
???}
??}
??o.innerHTML = '*';
??if(parseInt(o.style.bottom)<n){
???var clear = setInterval(m,20);
??}
?},
?expl:function(o,n,s,speed){
??var R = n/3;
??var Ri = n/6;
??var r = 0;
??var ri = 0;
??for(var i=0;i<s;i++){
???var span = document.createElement('span');
???var p = document.createElement('p');
???span.style.position = 'absolute';
???span.style.left = 0;
???span.style.top = 0;
???span.innerHTML = '*';
???p.style.position = 'absolute';
???p.style.left = 0;
???p.style.top = 0;
???p.innerHTML = '+';
???o.appendChild(span);
???o.appendChild(p);
??}
??function spr(){
???r += R*speed;
???ri+= Ri*speed/2;
???sp = o.getElementsByTagName('span');
???p = o.getElementsByTagName('p');
???for(var i=0; i<sp.length;i++){
????sp[i].style.left=r*Math.cos(360/s*i)+'px';
????sp[i].style.top=r*Math.sin(360/s*i)+'px';
????p[i].style.left=ri*Math.cos(360/s*i)+'px';
????p[i].style.top=ri*Math.sin(360/s*i)+'px';
???}
???R-=R*speed;
???if(R<2){
????clearInterval(clearI);
????o.parentNode.removeChild(o);
???}
??}
??var clearI = setInterval(spr,20);
?}
}
window.onload = function(){
?function happyNewYear(){
??new firework();
?}
?setInterval(happyNewYear,400);
}
</script>
<style type="text/css">
</style>
</head>
<body style="background:#000;font:12px Arial">
</body>
</html>

Html代码运行

1. <!DOCTYPE?html?PUBLIC?"-//W3C//DTD?XHTML?1.0?Transitional//EN"?"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">??
2. <html?xmlns="http://www.w3.org/1999/xhtml"?>??
3. <head>??
4. ????<title>Untitled?Page</title>??
5. </head>??
6. <style?type="text/css">??
7. .fire{display:block;?overflow:hidden;?font-size:12px;?position:absolute}; ??
8. body{overflow:hidden;?background:#000} ??
9. html{overflow:hidden;?background:#000} ??
10. </style>??
11. <body>??
12. </body>??
13. <script?type="text/javascript">??
14. var?Fire?=?function(r,?color)?{ ??
15. ????this.radius?=?r?||?12; ??
16. ????this.color?=?color?||?"FF6600"; ??
17. ????this.xpos?=?0; ??
18. ????this.ypos?=?0; ??
19. ????this.zpos?=?0; ??
20. ????this.vx?=?0; ??
21. ????this.vy?=?0; ??
22. ????this.vz?=?0; ??
23. ????this.mass?=?1; ??
24. ????this.p?=?document.createElement("span"); ??
25. ????this.p.className?=?"fire"; ??
26. ????this.p.innerHTML?=?"*"; ??
27. ????thisthis.p.style.fontSize?=?this.radius?+?"px"; ??
28. ????this.p.style.color?=?"#"?+?this.color; ??
29. } ??
30. Fire.prototype?=?{ ??
31. ????append:?function(parent)?{ ??
32. ????????parent.appendChild(this.p); ??
33. ????}, ??
34. ????setSize:?function(scale)?{ ??
35. ????????thisthis.p.style.fontSize?=?this.radius?*?scale?+?"px"; ??
36. ????}, ??
37. ????setPosition:function(x,?y)?{ ??
38. ????????this.p.style.left?=?x?+?"px"; ??
39. ????????this.p.style.top?=??y?+?"px"; ??
40. ????}, ??
41. ????setVisible:?function(b)?{ ??
42. ????????this.p.style.display?=?b???"block"?:?"none"; ??
43. ????} ??
44. } ??
45. var?fireworks?=?function()?{ ??
46. ????var?fires?=?new?Array(); ??
47. ????var?count?=?100; ??
48. ????var?fl?=?250; ??
49. ????var?vpx?=?500; ??
50. ????var?vpy?=?300; ??
51. ????var?gravity?=?.3; ??
52. ????var?floor?=?200; ??
53. ????var?bounce?=?-.8; ??
54. ????var?timer; ??
55. ????return?{ ??
56. ????????init:?function()?{ ??
57. ????????????for?(var?i=0;?i<count;?i++)?{ ??
58. ????????????????var?color?=?0xFF0000; ??
59. ????????????????color?=?(Math.random()?*?0xFFFFFF).toString(16).toString().split(".")[0]; ??
60. ????????????????while(color.length?<?6)?{ ??
61. ????????????????????color?=?"0"?+?color; ??
62. ????????????????} ??
63. ????????????????var?fire?=?new?Fire(12,?color); ??
64. ????????????????fires.push(fire); ??
65. ????????????????fire.ypos?=?-100; ??
66. ????????????????fire.vx?=?Math.random()?*?6?-?3; ??
67. ????????????????fire.vy?=?Math.random()?*?6?-?3; ??
68. ????????????????fire.vz?=?Math.random()?*?6?-?3; ??
69. ????????????????fire.append(document.body); ??
70. ????????????} ??
71. ????????????var?that?=?this; ??
72. ????????????timer?=?setInterval(function()?{ ??
73. ????????????????for?(var?i=0;i<count;?i++)?{ ??
74. ????????????????????that.move(fires[i]); ??
75. ????????????????} ??
76. ????????????},?30); ??
77. ????????}, ??
78. ????????move:?function(fire)?{ ??
79. ????????????fire.vy?+=?gravity; ??
80. ????????????fire.xpos?+=?fire.vx; ??
81. ????????????fire.ypos?+=?fire.vy; ??
82. ????????????fire.zpos?+=?fire.vz; ??
83. ????????????if?(fire.ypos?>?floor)?{ ??
84. ????????????????fire.ypos?=?floor; ??
85. ????????????????fire.vy?*=?bounce; ??
86. ????????????} ??
87. ????????????if?(fire.zpos?>?-fl)?{ ??
88. ????????????????var?scale?=?fl/?(fl+fire.zpos); ??
89. ????????????????fire.setSize(scale); ??
90. ????????????????fire.setPosition(vpx?+?fire.xpos?*?scale, ??
91. ?????????????????????????????????vpy?+?fire.ypos?*?scale); ??
92. ????????????????fire.setVisible(true); ??
93. ????????????}?else?{ ??
94. ????????????????fire.setVisible(false); ??
95. ????????????} ??
96. ????????} ??
97. ????} ??
98. } ??
99. fireworks().init(); ??
100. </script>??
101. </html>??

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" >
<head>
    <title>Untitled Page</title>
</head>
<style type="text/css">
.fire{display:block; overflow:hidden; font-size:12px; position:absolute};
body{overflow:hidden; background:#000}
html{overflow:hidden; background:#000}
</style>
<body>
</body>
<script type="text/javascript">
var Fire = function(r, color) {
	this.radius = r || 12;
	this.color = color || "FF6600";
	this.xpos = 0;
	this.ypos = 0;
	this.zpos = 0;
	this.vx = 0;
	this.vy = 0;
	this.vz = 0;
	this.mass = 1;
	this.p = document.createElement("span");
	this.p.className = "fire";
	this.p.innerHTML = "*";
	this.p.style.fontSize = this.radius + "px";
	this.p.style.color = "#" + this.color;
}
Fire.prototype = {
	append: function(parent) {
		parent.appendChild(this.p);
	},
	setSize: function(scale) {
		this.p.style.fontSize = this.radius * scale + "px";
	},
	setPosition:function(x, y) {
		this.p.style.left = x + "px";
		this.p.style.top =  y + "px";
	},
	setVisible: function(b) {
		this.p.style.display = b ? "block" : "none";
	}
}
var fireworks = function() {
	var fires = new Array();
	var count = 100;
	var fl = 250;
	var vpx = 500;
	var vpy = 300;
	var gravity = .3;
	var floor = 200;
	var bounce = -.8;
	var timer;
	return {
		init: function() {
			for (var i=0; i<count; i++) {
				var color = 0xFF0000;
				color = (Math.random() * 0xFFFFFF).toString(16).toString().split(".")[0];
				while(color.length < 6) {
					color = "0" + color;
				}
				var fire = new Fire(12, color);
				fires.push(fire);
				fire.ypos = -100;
				fire.vx = Math.random() * 6 - 3;
				fire.vy = Math.random() * 6 - 3;
				fire.vz = Math.random() * 6 - 3;
				fire.append(document.body);
			}
			var that = this;
			timer = setInterval(function() {
				for (var i=0;i<count; i++) {
					that.move(fires[i]);
				}
			}, 30);
		},
		move: function(fire) {
			fire.vy += gravity;
			fire.xpos += fire.vx;
			fire.ypos += fire.vy;
			fire.zpos += fire.vz;
			if (fire.ypos > floor) {
				fire.ypos = floor;
				fire.vy *= bounce;
			}
			if (fire.zpos > -fl) {
				var scale = fl/ (fl+fire.zpos);
				fire.setSize(scale);
				fire.setPosition(vpx + fire.xpos * scale,
								 vpy + fire.ypos * scale);
				fire.setVisible(true);
			} else {
				fire.setVisible(false);
			}
		}
	}
}
fireworks().init();
</script>
</html>

Html代码运行