第二种JavaScript放烟花代码爆炸出图形
来源:互联网 发布:程序员个人工作体会 编辑:程序博客网 时间:2024/04/30 06:59
<!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">
<div><A href="http://www.999jiujiu.com/">http://www.999jiujiu.com/</A></div>
</body>
</html>
<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">
<div><A href="http://www.999jiujiu.com/">http://www.999jiujiu.com/</A></div>
</body>
</html>
0 0
- 第二种JavaScript放烟花代码爆炸出图形
- 烟花爆炸
- 烟花爆炸
- 庆元旦,放烟花(纯javascript版烟花效果)
- view爆炸的烟花效果
- 放烟花脚本
- android 放烟花效果
- 烟花代码
- 杭州烟花大会烟花半空转向在人群中爆炸-杭州-烟花-爆炸
- 杭州烟花大会烟花半空转向在人群中爆炸-杭州-烟花-爆炸
- 杭州烟花大会烟花半空转向在人群中爆炸-杭州-烟花-爆炸
- 烟花爆炸色彩效果—ExplosionField
- 仿消灭星星烟花爆炸效果
- JS实现放烟花功能
- 放烟花有覅ifyifyi
- 用echarts放个烟花
- 浙江杭州烟花爆炸事故中受伤最重者属二级烧伤-杭州-烟花爆炸-烧伤
- 杭州烟花爆炸烧伤多人 百人皮肤灼伤衣服破损-杭州-烟花-爆炸
- [学习笔记]Objective-C与C学习交接(2)
- SQL Server 触发器
- Opencv2Sample分析之descriptor_extractor_matcher
- 经验传承:谈色彩设计方法
- Windows下配置Apache+Tomcat WEB服务器
- 第二种JavaScript放烟花代码爆炸出图形
- SQL Server 数据库安全
- Combox控件下拉选择不同值触发的动作响应
- 关于移动平台路径
- CK100在win7安装驱动方法
- 按位与按位或
- Java学习笔记之集合框架1
- proguard.ParseException: Unknown option '-keepdirectories' in line 57 of file
- 使用JSON-lib时报There is a cycle in the hierarchy!错误的解决方案