专栏首页练小习的专栏分享几种JS烟花

分享几种JS烟花

今天看到蓝色理想有几个哥们都发了自己写的烟花效果,弄的心里痒痒,自己也想写一个出来玩,结果把IE写死好几次,还是放弃了,这里转几个别人写的效果上来分享

<!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 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>

提示:你可以先修改部分代码再运行。

<!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 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>

提示:你可以先修改部分代码再运行。

<!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>

提示:你可以先修改部分代码再运行。

<!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;

this.xpos = 0;

this.ypos = 0;

this.zpos = 0;

this.vx = 0;

this.vy = 0;

this.vz = 0;

this.mass = 1;

this.x =0;

this.y=0;

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 = 150;

var fl = 250;

var vpx = 500;

var vpy = 300;

var gravity = .5;

var floor = 200;

var bounce = -.8;

var timer;

var wind = ((Math.floor(Math.random()*3) + 3)/10)*(Math.random()*2 - 1 > 0 ? 1 : -1)*.25;

var wpos = 0;

var wcount;

return {

init: function() {

wcount = 50 + Math.floor(Math.random() * 100);

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.vz = Math.random() * 6 - 3;

fire.vx = (Math.random()*2 - 1)*2 ;

fire.vy = Math.random()*-15 - 15;

fire.x = 500

fire.y = 600;

fire.append(document.body);

}

var that = this;

timer = setInterval(function() {

wpos++;

if (wpos >= wcount) {

wpos = 0;

wcount = 50 + Math.floor(Math.random() * 100);

wind = ((Math.floor(Math.random()*3) + 3)/10)*(Math.random()*2 - 1 > 0 ? 1 : -1)*.25;

}

for (var i=0;i<count; i++) {

that.move(fires[i]);

}

}, 30);

},

move: function(fire) {

fire.vy += gravity;

fire.x += fire.vx;

fire.y += fire.vy;

fire.vx += wind;

fire.setPosition(fire.x, fire.y);

if (fire.x < 0 || fire.x >1000 || fire.y < 0 || fire.y > 600) {

fire.vx = (Math.random()*2 - 1)*2;

fire.vy = Math.random()*-15 - 15;

fire.x = 500;

fire.y = 600;

fire.setPosition(fire.x, fire.y);

}

}

}

}

fireworks().init();

</script>

</html>

提示:你可以先修改部分代码再运行。

本文参与腾讯云自媒体分享计划,欢迎正在阅读的你也加入,一起分享。

我来说两句

0 条评论
登录 后参与评论

相关文章

  • oncopy和onpaste

           在Javascript中,有相应的事件可以监听复制和粘贴,那就是oncopy和onpaste。        oncopy: demo: <bo...

    高爽
  • Amazon Aurora 深度探索(一)

    本文对 Aurora 系统的实现从整体架构、存储、事务处理三个方面进行深入探讨,基于其论文和相关资料讨论具体实现细节,又跳出其外、从数据库内核技术实现的角度对 ...

    serena
  • Aptana:JavaScript开发利器

    简介        Aptana是一个非常强大、开源的专注于Ajax开发的开发工具,看下开源中国社区中对它的功能描述: JavaScript,JavaScri...

    高爽
  • JS判断滚动条是否停止滚动

           背景:昨天一个同事有种需求,有一个展示数据区域的div,带滚动条,当滚动条滚动时,需要向后台发请求,计算数据,再拿到前台展示。        分析...

    高爽
  • easyui内嵌iframe问题解决

    项目中使用easyui的tab页,每个tab页均内嵌iframe,现在要在tab页中控制新增一个同级别的tab页,记录如下: 首先是main.html主页面: ...

    用户1141560
  • Promise 实践

    promise已经是成为我们解决回调炼狱的常用方案,而且已经得到官方标准支持,如果你刚刚开始使用Promise,本文将帮助你了解几个常见的几个Promise的使...

    腾讯IVWEB团队
  • 01-老马jQuery教程-jQuery入口函数及选择器

    这套jQuery教程是老马专门为寒门子弟而录制,希望大家看到后能转发给更多的寒门子弟。视频都是免费,请参考课程地址:https://chuanke.baidu....

    老马
  • js返回树形结构数据

    /** * 树形结构转换 * @param a * @param idStr * @param pidStr * @param chindrenStr...

    用户1141560
  • TensorFlow 入门(2):使用DNN分类器对数据进行分类

    本文作者通过分析《高级API入门教程》这篇文章中的实例:教我们如何使用DNN(深度神经网络)分类器实现对鸢尾花的分类,并对其提出举一反三的案例,提升学习效果,并...

    谭正中
  • [JavaScript]自执行函数

    最近在接触mui的时候,遇到了一段代码: 1 (function($, doc) { 2 $.init({ 3 ...

    CN_Simo

扫码关注云+社区

领取腾讯云代金券