<html>
<title>燃放烟花</title>
<body bgcolor="black">
<script type="text/javascript">
if ('undefined' != typeof HTMLElement && HTMLElement.prototype && !HTMLElement.prototype.insertAdjacentHTML)
HTMLElement.prototype.insertAdjacentHTML = function (sWhere, sHTML) {
//BlueDestiny
var df; var r = this.ownerDocument.createRange();
switch (String(sWhere).toLowerCase()) {
case "beforebegin":
r.setStartBefore(this);
df = r.createContextualFragment(sHTML);
this.parentNode.insertBefore(df, this);
break;
case "afterbegin":
r.selectNodeContents(this);
r.collapse(true);
df = r.createContextualFragment(sHTML);
this.insertBefore(df, this.firstChild);
break;
case "beforeend":
r.selectNodeContents(this);
r.collapse(false);
df = r.createContextualFragment(sHTML);
this.appendChild(df);
break;
case "afterend":
r.setStartAfter(this);
df = r.createContextualFragment(sHTML);
this.parentNode.insertBefore(df, this.nextSibling);
break;
}
};
var FireworksBase = function (member) {
//烟花基类
if (!(this.constructor.prototype instanceof arguments.callee)) this.constructor = arguments.callee;
if (member.prototype) for (var i in member.prototype) this[i] = member.prototype[i];
with ({ domid : '', velocity : 0, angle : 0, side : 0, startX : 0, startY : 0, end : 0, t : 0 }) //初始值
with (member) {
this.domid = domid; //DOM对象ID
this.velocity = velocity; //初始速度
this.angle = angle; //角度
this.side = side; //边长
this.startX = startX; //初始x值
this.startY = startY; //初始y值
this.end = end; //最大y值
this.t = t; //当前时间
}
};
var Fireworks = function (member) {
//烟花类
if (!(this.constructor.prototype instanceof arguments.callee)) this.constructor = arguments.callee;
this.constructor.prototype.constructor.call(this, member); //call super
with ({ length : 15, time : 0 })
with (member) {
this.length = length //碎片个数
this.time = time; //最大时间
}
this.x = this.y = 0; //当前位置
this.dom = null;
};
var FireworksFragment = function (member) {
//烟花碎片类
if (!(this.constructor.prototype instanceof arguments.callee)) this.constructor = arguments.callee;
this.constructor.prototype.constructor.call(this, member); //call super
with ({ length : 5, interval : 4 })
with (member) {
this.length = length; //碎片轨迹个数
this.interval = interval; //间隔
}
this.path = [[this.startX, this.startY]]; //路径
this.doms = [];
};
FireworksBase.prototype = {
displacement : function (v, t) {
//位移公式:vt - 0.5gt^2 = S
return v * t - t * t * 98 * .5; //重力加速度98像素
}
, v : function (velocity, angle) {
//速度
var radian = Math.PI / 180 * angle;
return { x : -Math.cos(radian) * velocity, y : -Math.sin(radian) * velocity };
}
, set : function () {} //设置位置
, run : function () {} //执行流程
, initDOM : function () {} //初始化DOM
, destruction : function () {
//销毁对象
this.domid = ''; //DOM对象ID
this.velocity = 0; //初始速度
this.angle = 0; //角度
this.side = 0; //边长
this.startX = 0; //初始x值
this.startY = 0; //初始y值
this.end = 0; //最大y值
this.t = 0;
}
};
Fireworks.prototype = new FireworksBase({ prototype : {
initDOM : function () {
if (!document.body) throw new Error('Body未初始化');
document.body.insertAdjacentHTML('beforeEnd', '<div id="' + this.domid + '" style=" position:absolute;width:' + this.side + 'px;height:' + this.side + 'px;font-size:' + this.side + 'px;"><font color="ffa500">●</font></div>');
this.dom = document.getElementById(this.domid); //DOM对象
this.set(this.startX, this.startY); //初始化位置
}
, set : function (x, y) {
//设置位置
this.dom.style.left = (this.x = x) + 'px';
this.dom.style.top = (this.y = y) + 'px';
}
, run : function (time) {
this.t += time;
var v = this.v(this.velocity, this.angle);
var x = this.startX + Math.ceil(v.x * this.t);
var y = this.startY - Math.ceil(this.displacement(v.y, this.t));
if (this.time > this.t && y < this.end) {
this.set(x, y);
return true;
} else {
return false;
}
}
, blast : function (list) {
list = list || [];
for (var i = 0 ; i < this.length ; i ++) {
list[list.length] = new FireworksFragment({
domid : this.dom.id + '_' + i
, side : 5
, velocity : 49 + Math.round(Math.random() * 49)
, angle : Math.floor(Math.random() * 360)
, startY : this.y + Math.floor(this.side / 2) - 2
, startX : this.x + Math.floor(this.side / 2) - 2
, end : this.end
});
list[list.length - 1].initDOM();
}
return list;
}
, destruction : function (list) {
this.blast(list);
this.constructor.prototype.constructor.prototype.destruction.call(this); //call super destruction
this.dom.parentNode.removeChild(this.dom);
this.dom = null;
this.time = this.x = this.y = this.length = 0;
}
}});
FireworksFragment.prototype = new FireworksBase({ prototype : {
initDOM : function () {
if (!document.body) throw new Error('Body未初始化');
var s = this.side / this.length;
for (var i = 0 ; i < this.length ; i ++) {
var side = (i + 1) * s;
document.body.insertAdjacentHTML('beforeEnd', '<div id="' + this.domid + '_' + i + '" style="position:absolute;width:' + side + 'px;height:' + side + 'px;font-size:' + side + 'px;"><font color="ffa500">●</font></div>');
this.doms[i] = document.getElementById(this.domid + '_' + i);
}
this.set(); //初始化位置
}
, set : function (x, y) {
//设置位置
var n = this.path[this.path.length - 1];
for (var l = this.doms.length - 1, i = l ; i > -1 ; i --) {
if (this.path[i * this.interval]) n = this.path[i * this.interval];
this.doms[i].style.left = n[0] + 'px';
this.doms[i].style.top = n[1] + 'px';
}
}
, run : function (time) {
if (this.doms.length == this.length) {
this.t += time;
var v = this.v(this.velocity, this.angle);
var x = this.startX + Math.ceil(v.x * this.t);
var y = this.startY - Math.ceil(this.displacement(v.y, this.t));
this.path.push([x, y]);
}
this.cutPath();
if (y < this.end || this.remove()) {
this.set(x, y); return true;
} else return false;
}
, cutPath : function () {
//剪切路径
this.path = this.path.slice(-(this.doms.length - 1) * this.interval);
}
, remove : function () {
//去掉路径DOM对象
var dom = this.doms.pop();
dom && dom.parentNode.removeChild(dom);
return !!this.doms.length;
}
, destruction : function () {
this.constructor.prototype.constructor.prototype.destruction.call(this); //call super destruction
this.length = this.interval = 0;
this.path = this.doms = null;
}
}});
var Timer = function (member) {
with ({ list : [] })
with (member) {
this.list = list;this.time = time;this.step = step;
}
};
Timer.prototype.run = function (F, one) {
var wc = this, next = false;
with (this) {
for (var i = 0 ; i < list.length ; i ++) {
if (!list[i]) continue;
if (list[i].run(step)) next = true;
else {
list[i].destruction(list);
list[i] = null;
}
}clear();
!one && next && window.setTimeout(function () { wc.run(F) }, time) || F && F();
}
};
Timer.prototype.clear = function () {for (var i = this.list.length - 1 ; i > -1 ; i --) (this.list[i] === null) && this.list.splice(i, 1);};
window.onload = function () {
var N = 0;
var C = function (id) {
var t = new Fireworks({
domid : id + (++ N), velocity : 300 + Math.floor(Math.random() * 200) //每秒200到500像素的发射速度
, angle : 240 + Math.floor(Math.random() * 60)
, side : 10, startY : 500, startX : 500, end : 500, time : 1, length : 20
});
t.initDOM();
return t;
};
var t = new Timer({ list : [C('example')], time : 10, step : 10 / 1000 });
t.run(function () { t.list.push(C('example'));t.run(arguments.callee); });
};
</script>
<SCRIPT type="text/javascript">
radius =0;
last_radius=100;
startY=200;
c_count=0;
deviatY=1;
// 设定礼花颜色
Colors=new Array('ff0000','00ff00','ffffff','ff00ff','ffa500','ffff00','00ff00','ffffff','ff00ff');
sColors=new Array('ffa500','00ff00','FFAAFF','fff000','fffffF');
color=sColors[Math.floor(Math.random()*sColors.length)];
if(document.all){
last_radius=document.body.clientWidth/8;
startX=document.body.clientWidth/2;
staY= document.body.clientHeight-20;
}else{last_radius=window.outerWidth/8;
startX=window.outerWidth/2;
staY= window.outerHeight-20;
}
for(i=0;i<Math.PI*2;i=i+0.3){
document.write("<DIV STYLE='position:absolute;font-size:5;background-color:"+color+";top:"+staY+";left:"+startX+";'ID='bon"+i+"'>*</DIV>");
}
// 设定礼花升起时间
setTimeout("uchiage()",10)
function uchiage(){
if(startY < staY){
staY-=10;
for(i=0;i<Math.PI*2;i=i+0.3){
if(document.all){
document.all["bon"+i].style.pixelTop = staY+document.body.scrollTop;
}else{
document.getElementById("bon"+i).style.top=staY+window.pageYOffset +"px";
}
}
setTimeout("uchiage()",50);
}else{
radius =20;hanabi();
}
}
function hanabi(){
if(last_radius > radius){
radius +=10;
for(i=0;i<Math.PI*2;i=i+0.3){
pointX = startX + Math.cos(i)*radius;
(deviatY == 0.3)?katamuki=(pointX - startX) * 0.4:katamuki=0;
pointY = startY + Math.sin(i)*radius*deviatY+katamuki;
if(document.all){
document.all["bon"+i].style.pixelTop = pointY+document.body.scrollTop;
document.all["bon"+i].style.pixelLeft = pointX;
}else{
document.getElementById("bon"+i).style.top=pointY+window.pageYOffset +"px";
document.getElementById("bon"+i).style.left=pointX+"px";
}
}
// 设定礼花张开时间
setTimeout("hanabi()",60);
}else if(c_count<300){
for(i=0;i<Math.PI*2;i=i+0.3){
color=Colors[Math.floor(Math.random()*Colors.length)];
if(document.all){
document.all["bon"+i].style.backgroundColor = color;
}else{
document.getElementById("bon"+i).style.backgroundColor = color;
}
c_count++
}
// 设定礼花持续时间
setTimeout("hanabi()",50);
}else{
color=sColors[Math.floor(Math.random()*sColors.length)];
radius = 20;c_count=0;
if(document.all){
scrX=document.body.clientWidth - last_radius*2;
startX=Math.floor(Math.random()*scrX)+last_radius;
startY=Math.random()*last_radius+last_radius;
staY= document.body.clientHeight-20;
(!(Math.floor(Math.random()*3)))?deviatY=0.3:deviatY=1;
for(i=0;i<Math.PI*2;i=i+0.3){
document.all["bon"+i].style.backgroundColor = color;
document.all["bon"+i].style.pixelTop = staY+document.body.scrollTop;
document.all["bon"+i].style.pixelLeft = startX;
}
}else{
scrX=window.outerWidth-last_radius*2;
startX=Math.floor(Math.random()*scrX)+last_radius;
startY=Math.random()*last_radius+last_radius;
staY= window.outerHeight-20;
(!(Math.floor(Math.random()*3)))?deviatY=0.3:deviatY=1;
for(i=0;i<Math.PI*2;i=i+0.3){
document.getElementById("bon"+i).style.backgroundColor = color;
document.getElementById("bon"+i).style.top=staY+window.pageYOffset +"px";
document.getElementById("bon"+i).style.left=startX+"px";
}
}
uchiage();
}
}
function hanabi_size(){
if(document.all){
last_radius=document.body.clientWidth/8;
}else{
last_radius=window.outerWidth/8;
}
}
document.body.οnresize=hanabi_size;
</SCRIPT>
</body>
</html>