`
charrysong
  • 浏览: 52121 次
  • 性别: Icon_minigender_1
  • 来自: 广州
社区版块
存档分类
最新评论

分享几种超漂亮的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代码复制代码运行
  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;   
  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.x =0;   
  25.     this.y=0;   
  26.     this.p = document.createElement("span");   
  27.     this.p.className = "fire";   
  28.     this.p.innerHTML = "*";   
  29.     thisthis.p.style.fontSize = this.radius + "px";   
  30.     this.p.style.color = "#" + this.color;   
  31. }   
  32. Fire.prototype = {   
  33.     append: function(parent) {   
  34.         parent.appendChild(this.p);   
  35.     },   
  36.     setSize: function(scale) {   
  37.         thisthis.p.style.fontSize = this.radius * scale + "px";   
  38.     },   
  39.     setPosition:function(x, y) {   
  40.         this.p.style.left = x + "px";   
  41.         this.p.style.top =  y + "px";   
  42.     },   
  43.     setVisible: function(b) {   
  44.         this.p.style.display = b ? "block" : "none";   
  45.     }   
  46. }   
  47. var fireworks = function() {   
  48.     var fires = new Array();   
  49.     var count = 150;   
  50.     var fl = 250;   
  51.     var vpx = 500;   
  52.     var vpy = 300;   
  53.     var gravity = .5;   
  54.     var floor = 200;   
  55.     var bounce = -.8;   
  56.     var timer;   
  57.     var wind = ((Math.floor(Math.random()*3) + 3)/10)*(Math.random()*2 - 1 > 0 ? 1 : -1)*.25;   
  58.     var wpos = 0;   
  59.     var wcount;   
  60.     return {   
  61.         init: function() {   
  62.             wcount = 50 + Math.floor(Math.random() * 100);   
  63.             for (var i=0; i<count; i++) {   
  64.                 var color = 0xFF0000;   
  65.                 color = (Math.random() * 0xFFFFFF).toString(16).toString().split(".")[0];   
  66.                 while(color.length < 6) {   
  67.                     color = "0" + color;   
  68.                 }   
  69.                 var fire = new Fire(12, color);   
  70.                 fires.push(fire);   
  71.                 fire.ypos = -100;   
  72.                 fire.vz = Math.random() * 6 - 3;   
  73.                 fire.vx = (Math.random()*2 - 1)*2 ;   
  74.                 fire.vy = Math.random()*-15 - 15;   
  75.                 fire.x = 500  
  76.                 fire.y = 600;   
  77.                 fire.append(document.body);   
  78.             }   
  79.             var that = this;   
  80.             timer = setInterval(function() {   
  81.                 wpos++;   
  82.                 if (wpos >= wcount) {   
  83.                     wpos = 0;   
  84.                     wcount = 50 + Math.floor(Math.random() * 100);   
  85.                     wind = ((Math.floor(Math.random()*3) + 3)/10)*(Math.random()*2 - 1 > 0 ? 1 : -1)*.25;   
  86.                 }   
  87.                 for (var i=0;i<count; i++) {   
  88.                     that.move(fires[i]);   
  89.                 }   
  90.             }, 30);   
  91.         },   
  92.         move: function(fire) {   
  93.             fire.vy += gravity;   
  94.             fire.x += fire.vx;   
  95.             fire.y += fire.vy;   
  96.             fire.vx += wind;   
  97.             fire.setPosition(fire.x, fire.y);   
  98.                 if (fire.x < 0 || fire.x >1000 || fire.y  < 0 || fire.y  > 600) {   
  99.                     fire.vx = (Math.random()*2 - 1)*2;   
  100.                     fire.vy = Math.random()*-15 - 15;   
  101.                     fire.x = 500;   
  102.                     fire.y = 600;   
  103.                     fire.setPosition(fire.x, fire.y);   
  104.                 }   
  105.         }   
  106.     }   
  107. }   
  108. fireworks().init();   
  109. </script>  
  110. </html>  

分享到:
评论

相关推荐

    微信HTML5在线朋友圈游戏源码带安装部署教程-点击夜空欣赏烟花.rar

    游戏中使用`&lt;canvas&gt;`元素创建画布,通过JavaScript编程来实现烟花绽放的效果。JavaScript是一种广泛应用于网页开发的脚本语言,它可以操作HTML元素,响应用户交互,以及进行复杂的动画效果。在本例中,开发者可能...

    基于Python的天气预测和天气可视化项目源码+文档说明(高分毕设/大作业)

    基于Python的天气预测和天气可视化项目源码+文档说明(高分毕设/大作业),个人经导师指导并认可通过的高分设计项目,评审分99分,代码完整确保可以运行,小白也可以亲自搞定,主要针对计算机相关专业的正在做大作业的学生和需要项目实战练习的学习者,可作为毕业设计、课程设计、期末大作业,代码资料完整,下载可用。 基于Python的天气预测和天气可视化项目源码+文档说明(高分毕设/大作业)基于Python的天气预测和天气可视化项目源码+文档说明(高分毕设/大作业)基于Python的天气预测和天气可视化项目源码+文档说明(高分毕设/大作业)基于Python的天气预测和天气可视化项目源码+文档说明(高分毕设/大作业)基于Python的天气预测和天气可视化项目源码+文档说明(高分毕设/大作业)基于Python的天气预测和天气可视化项目源码+文档说明(高分毕设/大作业)基于Python的天气预测和天气可视化项目源码+文档说明(高分毕设/大作业)基于Python的天气预测和天气可视化项目源码+文档说明(高分毕设/大作业)基于Python的天气预测和天气可视化项目源码+文档说明(高分毕设/大作业)基于Python的天气预测和天气可视化项目源码+文档说明(高分毕设/大作业)基于Python的天气预测和天气可视化项目源码+文档说明(高分毕设/大作业)基于Python的天气预测和天气可视化项目源码+文档说明(高分毕设/大作业)基于Python的天气预测和天气可视化项目源码+文档说明(高分毕设/大作业)基于Python的天气预测和天气可视化项目源码+文档说明(高分毕设/大作业)基于Python的天气预测和天气可视化项目源码+文档说明(高分毕设/大作业)基于Python的天气预测和天气可视化项目源码+文档说明(高分毕设/大作业)基于Python的天气预测和天气可视化项目源码+文档说明(高分毕设/大作业

    2025工业5G终端设备发展报告.pdf

    2025工业5G终端设备发展报告.pdf

    基于分布式ADMM算法与碳排放交易的MATLAB代码:电力系统优化调度

    内容概要:本文介绍了一段基于分布式ADMM算法的MATLAB代码,用于电力系统优化调度,尤其关注碳排放交易的影响。代码首先对电力系统进行分区,接着构建DC-DOPF最优潮流问题,考虑碳排放交易的成本,并利用ADMM算法求解。文中详细解释了各个关键步骤,如系统分区、目标函数设计、碳排放交易成本计算以及ADMM算法的具体实现。此外,代码还包括了多种优化技术和实用技巧,如自适应惩罚因子调整、边界条件处理等,确保算法的有效性和实用性。 适用人群:适用于对电力系统优化调度感兴趣的科研人员、工程师和技术爱好者,尤其是希望深入了解分布式算法和碳排放交易机制的人群。 使用场景及目标:①研究电力系统优化调度的新方法和技术;②探讨碳排放交易对电力系统调度策略的影响;③提高电力系统运行效率和环保性能。 其他说明:代码不仅提供了详细的注释和模块化设计,还展示了丰富的可视化结果,便于理解和进一步研究。同时,文中提到了一些实际应用案例,证明了该方法的有效性和优越性。

    IDEA中本地运行配置文件

    适配于jdk8版本

    dify-course-demo.yml

    自动化生成全套教程

    【GRP-U8软件维护】GRP-U8软件常见问题及解决方案:涵盖账务处理、自定义凭证打印、期初余额导入、双凭证模式调整、电子报表、工资模块、资产管理、物资管理、网上报销、预算编制、学生收费、安装配置及

    内容概要:本文档《GRP_U8软件近期常见问题85例.docx》详细列出了GRP_U8软件在实际使用过程中遇到的85个常见问题及其解决方案。这些问题涵盖了账务处理、电子报表、工资模块、资产管理、物资管理、成本模块、网上报销、预算编制、学生收费、安装配置以及基础数据管理等多个方面。每个问题不仅描述了现象,还提供了具体的解决步骤或SQL语句。文档强调在执行任何脚本前务必进行整库备份,并提供了维护问题的联系方式。 适合人群:适用于GRP_U8软件的管理员、技术支持人员及有一定数据库操作基础的用户。 使用场景及目标:①帮助用户快速定位并解决GRP_U8软件在账务处理、报表生成、工资管理、资产管理等模块中遇到的具体问题;②提供详细的SQL语句和操作指南,确保用户能够独立解决问题,减少对技术支持的依赖;③指导用户在遇到软件安装、配置及升级相关问题时采取正确的措施。 其他说明:文档内容正在不断完善中,用户可以通过私信反馈意见和建议。此外,文档中多次强调了数据安全的重要性,提醒用户在执行任何操作前做好备份工作。针对某些特定问题,文档还提供了多种解决方案供用户选择,以适应不同的环境和需求。

    少儿编程scratch项目源代码文件案例素材-scratch RPG 战斗.zip

    少儿编程scratch项目源代码文件案例素材-scratch RPG 战斗.zip

    基于模型预测控制(MPC)的无人艇分布式编队协同控制仿真与实现

    内容概要:本文详细介绍了利用模型预测控制(MPC)实现无人艇分布式编队协同控制的方法和技术。首先,通过简化的动力学模型和MATLAB代码展示了无人艇的基本行为预测。接着,深入探讨了编队协同控制的关键要素,包括代价函数的设计、信息交换机制以及分布式MPC的具体实现步骤。文中还提供了具体的Python代码示例,涵盖了从单个无人艇的动力学建模到多智能体之间的协作控制。此外,作者分享了一些实用技巧,如如何处理通信延迟、传感器噪声等问题,并展示了仿真效果,证明了所提出方法的有效性和鲁棒性。 适合人群:对无人艇编队控制、模型预测控制(MPC)、分布式系统感兴趣的科研人员、工程师及高校学生。 使用场景及目标:适用于研究和开发无人艇编队控制系统,特别是希望通过分布式控制实现高效、灵活的编队任务。目标是在复杂的海洋环境中,使无人艇能够自主完成编队、跟踪指定路径并应对各种干扰因素。 其他说明:文中提供的代码片段和理论解释有助于理解和实现无人艇编队控制的实际应用。建议读者在实验过程中结合实际情况进行参数调整和优化。

    操作系统实验2内存管理实验

    (3)编写程序验证FIFO和Stack LRU页面置换算法 (4)分别用FIFO和Stack LRU页置换算法,自己设定一个页面引用序列,绘制页错误次数和可用页帧总数的曲线并对比(可用Excel绘制或手绘);能否重现FIFO导致的Belady异常; (5)[选做]编程实现最优页置换算法,用课件上的序列验证。

    机器学习(深度学习):一个用于骨折分类的医学图像数据集

    一个用于骨折分类的医学图像数据集,旨在通过计算机视觉技术帮助研究人员和医疗专业人员准确识别和分类骨折类型。以下是关于该数据集的详细介绍。该数据集包含了多种类型的骨折X光图像,涵盖了常见的骨折类别,如撕脱性骨折(Avulsion Fractures)、粉碎性骨折(Comminuted Fractures)、骨折脱位(Fracture-Dislocations)、青枝骨折(Greenstick Fractures)、发际线骨折(Hairline Fractures)、嵌插性骨折(Impacted Fractures)、纵向骨折(Longitudinal Fractures)、斜行骨折(Oblique Fractures)、病理性骨折(Pathological Fractures)和螺旋形骨折(Spiral Fractures)等。多样性:数据集中的图像来自不同的骨折类型,能够为模型训练提供丰富的样本。高质量标注:数据由专业放射科医生手动标记,确保了数据的准确性和可靠性。适用性:该数据集适用于机器学习和深度学习项目,可用于开发自动化骨折分类系统。该数据集主要用于训练和验证计算机视觉模型,以实现从X光图像中自动识别和分类骨折类型。通过自动化骨折分类,可以提高医疗诊断的效率和准确性,减少人为误判,并帮助医疗专业人员更快地做出决策。是一个极具价值的医学图像数据集,能够为医疗领域的研究人员和从业者提供有力支持,推动医学影像分析技术的发展。

    互联网的兴起与数字未来

    本书《互联网的历史与数字未来》由约翰尼·瑞安撰写,探讨了互联网从诞生到成为全球性现象的历程。书中分为三个阶段:分布式网络与离心思想的兴起、互联网的扩展以及新兴环境下的互联网。第一阶段追溯了互联网概念的起源,包括冷战背景下的军事实验和计算机技术的普及。第二阶段描述了互联网如何从军事网络演变为全球互联网,并催生了万维网。第三阶段则探讨了Web 2.0的出现、网络社会的形成以及互联网对政治、文化和商业的深远影响。瑞安强调了互联网作为离心力、用户驱动和开放性的三个核心特征,并指出这些特征正在重塑我们的世界。

    易语言进程封包截取工具

    进程封包截取神器,支持TCP和UDP协议封包拦截

    最新版kibana-9.0.0-linux-x86-64.tar.gz

    最新版kibana-9.0.0-linux-x86_64.tar.gz

    子查询练习题,多练习总没有坏处,不知道凑没凑够十一个字

    子查询练习题,多练习总没有坏处,不知道凑没凑够十一个字

    可见光近红外波段VO2介电常数的Matlab计算与COMSOL仿真教程

    内容概要:本文详细介绍了如何利用Matlab计算二氧化钒(VO2)在可见光到近红外波段的介电常数,并将其应用于COMSOL多物理场仿真软件进行光学性能仿真。主要内容包括:VO2在不同温度下的相变特性及其对折射率的影响;基于Lorentz和Drude模型的介电常数计算方法;Matlab代码实现步骤;COMSOL中材料参数的导入与设置;以及常见错误提示和解决方案。文中还附带了一个详细的30分钟教学视频,帮助读者更好地理解和掌握整个流程。 适合人群:对光学材料、相变材料感兴趣的科研工作者和技术人员,尤其是从事智能窗户、光学开关等领域研究的人士。 使用场景及目标:① 学习并掌握VO2在不同温度下的光学特性和相变机制;② 利用Matlab和COMSOL进行材料参数计算和仿真,为实际应用提供理论支持;③ 解决仿真过程中可能出现的问题,提高仿真精度。 阅读建议:建议读者跟随文中的代码示例逐步操作,结合提供的教学视频加深理解。对于初学者来说,可以先熟悉Matlab的基本语法和COMSOL的操作界面,再尝试完成完整的仿真流程。

    COMSOL模拟激光打孔热应力耦合分析及优化方法

    内容概要:本文详细介绍了利用COMSOL Multiphysics进行激光打孔过程中热应力耦合仿真的具体步骤和技术要点。首先,通过建立波动光学和固体力学两个物理场,精确模拟了1064nm激光与材料相互作用产生的温度场变化及其引起的热膨胀效应。接着,针对热源加载、网格划分、求解器配置等方面进行了深入探讨,提出了多项创新性的解决方案,如采用移动高斯热源实现精准加热、引入时间条件判断调整热膨胀系数以及优化网格布局等措施。此外,还讨论了材料参数设置中的注意事项,尤其是对于高温合金材料,在不同温度区间内的导热系数和弹性模量的变化规律,并强调了相变潜热的影响。最后,通过对温度场和应力场的综合分析,揭示了激光移动速度对孔洞边缘应力分布的影响机制。 适用人群:从事激光加工、材料科学、热力学研究的专业人士,以及对多物理场耦合仿真感兴趣的科研工作者。 使用场景及目标:适用于希望深入了解激光打孔过程中热应力形成机理的研究人员;旨在提高加工精度、减少缺陷发生的工程技术人员;希望通过理论模型指导实际生产的制造业从业者。 其他说明:文中提供了大量MATLAB代码片段用于辅助理解和实施相关操作,同时分享了许多实用的经验技巧,帮助读者更好地掌握COMSOL软件的应用。

    永磁同步电机全速度域无位置传感器控制技术与切换策略研究

    内容概要:本文详细探讨了永磁同步电机(PMSM)在全速度范围内实现无位置传感器控制的技术方法和切换策略。针对高速和低速段分别介绍了超螺旋滑模控制和脉振高频方波注入的具体实现方式,并提供了相应的代码示例。对于切换策略,则讨论了加权切换和双坐标切换的方法,强调了在实际应用中需要注意的问题,如角度补偿和平滑过渡。此外,还分享了一些实用的经验技巧,如高频注入信号的滤波处理、滑模控制参数的优化设置等。 适合人群:从事电机控制系统设计的研究人员和技术工程师。 使用场景及目标:适用于需要深入了解PMSM无位置传感器控制技术的研发项目,旨在帮助工程师掌握不同速度范围内的最优控制策略,确保系统在全速域内的稳定性和可靠性。 其他说明:文中提供的代码片段和实践经验有助于读者更好地理解和实施相关技术,同时也提醒读者在实际应用中应注意参数调整和系统调试。

    C#运控框架雷赛DMC系列项目:适合新手的运动控制源码学习

    内容概要:本文介绍了一个基于C#和雷赛DMC系列的运动控制项目,该项目提供了详细的源码解析和技术要点讲解。尽管界面较为简陋,但功能齐全,涵盖了设备连接、运动参数设置、运动控制、状态监测等多个方面。文章详细解释了各个关键模块的实现,如初始化、运动控制、指令解析、多线程同步和紧急停止等功能。此外,还介绍了常见的陷阱和优化建议,帮助新手更好地理解和掌握运动控制编程。 适合人群:初学者和有一定编程基础的开发者,特别是对运动控制编程感兴趣的程序员。 使用场景及目标:① 学习C#与雷赛DMC系列设备的集成;② 掌握运动控制项目的开发流程;③ 实践运动控制的实际应用场景,如工业自动化。 其他说明:项目不仅提供完整的代码示例,还包括了许多实用的技术提示和最佳实践,非常适合新手进行深度学习和改造。

    新能源汽车电池包热管理:StarCCM+共轭传热仿真全流程解析

    内容概要:本文详细介绍了如何使用StarCCM+软件进行新能源汽车电池包的共轭传热仿真。首先阐述了电池包热管理的基础知识,包括电芯发热机理和常见热管理方式。接着逐步讲解了从三维数模的几何清理、面网格和体网格生成、关键传热系数设置到最后的计算参数设定等一系列仿真步骤。每个环节都提供了具体的参数设置方法和技术要点,如接触热阻、边界层网格、瞬态与稳态分析的选择等。此外,文中还分享了许多实践经验,如几何清理中的倒角处理、网格划分的优化策略、接触热阻的实际测量与设置等。 适合人群:从事新能源汽车行业电池包热管理研究的技术人员,尤其是有一定StarCCM+使用经验的工程师。 使用场景及目标:①掌握电池包热管理的基本理论;②熟练运用StarCCM+进行电池包共轭传热仿真;③提高仿真精度,减少误差,确保电池包的安全性和高效运行。 其他说明:文章不仅提供了详细的仿真步骤指导,还附带了一些实用的经验技巧,有助于读者在实际工作中避免常见错误,提高工作效率。

Global site tag (gtag.js) - Google Analytics