第二種JavaScript放煙花代碼

2024-09-05 12:21:57

字體：大中小

來源：轉載

供稿：網友

第二種JavaScript放煙花代碼，與第一種的區別在于煙花展開的樣式不同，其它樣式是可以自己調整的，不過代碼你確實需要先好好看看。

<!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>第二種JavaScript放煙花代碼</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>

上一篇：分享一個Js煙花效果

下一篇：貌似3D效果的JS煙花背景特效代碼

學習交流

如何查找有故障的配件

如何查找有故障的配件...

熱門圖片

猜你喜歡的新聞

猜你喜歡的關注