JavaScript烟花效果

一个很简单的烟花代码

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;

将上面代码放入HTML的body中即可，如下

<html>
<body bgcolor="black">
<SCRIPT type="text/javascript">
</SCRIPT>
</body>
</html>

JavaScript烟花效果相关推荐

html动画之制作烟花效果,JavaScript实现烟花绽放动画效果
先编写一个烟花绽放的动画效果. 放烟花时,一个烟花可分为两个阶段:(1)烟花上升到空中:(2)烟花炸开成碎片,炸开的碎片慢慢消散. 为此抽象出两个对象类:Firework和Particle.其中,Fi ...
JavaScript实现微信聊天烟花效果
微信8.0烟花效果实现 <!DOCTYPE html> <html lang="en"><head><meta charset=" ...
JavaScript烟花设计
JavaScript烟花设计今天给大家分享一篇自己用JavaScript实现烟花设计,主要运用了js+html语言,实现动态效果,展现出月明星稀下城市一片宁静的情景,令人心旷神怡. 文章目录系列文 ...
Javascript动画效果（四）
Javascript动画效果(四) 前面我们自己写了一个小小的关于js动画的插件,下面我们来使用之前的框架来完成我们想要的动画效果.我们经常在淘宝网中看到,鼠标经过某一图片时,该图片有从上滚出而又从下 ...
java word转html 烟火,Java多线程制作烟花效果.doc
Java多线程制作烟花效果 Java多线程应用实例: 制作烟花效果本例知识点一句话讲解新学知识使用Thread类管理线程已学知识Math类产生随机数使用Color类设置颜色使用Graphics类绘制 ...
C语言用循环写出新年祝福语图案,非常漂亮的新年祝福!C语言实现漂亮的烟花效果...
本文实例为大家分享了C语言实现漂亮的烟花效果展示的具体代码,供大家参考,具体内容如下程序名称:祝福烟花,祝福朋友编译环境:VC++6.0 && easyx(立冬版) #includ ...
粒子系统-烟花效果的实现
提到烟花,大家首先想到的都是天空上那绽放的炫美,或者手中炫目的白光,作为计算机体制内的人,以面向对象的思维来看待烟花的话,会得到什么呢?我们可以将美丽的烟花效果抽象为由一个个粒子组成的一个系统,将粒子 ...
6 cocos2dx粒子效果，类图关系，系统原生粒子和自定义粒子效果，粒子编译器软件，爆炸粒子效果，烟花效果，火焰效果，流星效果，漩涡粒子效果，雪花效果，烟雾效果，太阳效果，下雨效果
1 粒子示例 2 类图关系 3 系统原生粒子 CCParticleSystem 所有粒子系统的父类 CCParticleSystemPoint. CCParticleSystemQuad 点粒 ...
java窗口如何定时关闭_[Java教程]【温故而知新】Javascript窗口效果（全屏显示窗口、定时关闭窗口）_星空网...
[温故而知新]Javascript窗口效果 (全屏显示窗口.定时关闭窗口) 2014-10-30 0 1.全屏显示窗口全屏显示窗口 2.定时关闭窗口定时关闭窗口来源:<HTML.CSS.J ...

JavaScript烟花效果

JavaScript烟花效果相关推荐

最新文章

热门文章