JS烟花背景效果实现方法


Posted in Javascript onMarch 03, 2015

本文实例讲述了JS烟花背景效果实现方法。分享给大家供大家参考。具体实现方法如下:

<!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>又一个很酷的JS烟花背景特效</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>

运行效果如下所示:

JS烟花背景效果实现方法

希望本文所述对大家的javascript程序设计有所帮助。

Javascript 相关文章推荐
jQuery 1.7.2中getAll方法的疑惑分析
May 23 Javascript
JQuery事件e参数的方法preventDefault()取消默认行为
Sep 26 Javascript
面向对象设计模式的核心法则
Nov 10 Javascript
jquery.mobile 共同布局遇到的问题小结
Feb 10 Javascript
jquery对Json的各种遍历方法总结(必看篇)
Sep 29 Javascript
如何选择jQuery版本 1.x? 2.x? 3.x?
Apr 01 jQuery
webpack4 css打包压缩问题的解决
May 18 Javascript
详解关于vue-area-linkage走过的坑
Jun 27 Javascript
axios的拦截请求与响应方法
Aug 11 Javascript
微信小程序全局变量改变监听的实现方法
Jul 15 Javascript
在vue中阻止浏览器后退的实例
Nov 06 Javascript
JavaScript 替换所有匹配内容及正则替换方法
Feb 12 Javascript
深入理解JavaScript系列(26):设计模式之构造函数模式详解
Mar 03 #Javascript
深入理解JavaScript系列(25):设计模式之单例模式详解
Mar 03 #Javascript
js+jquery常用知识点汇总
Mar 03 #Javascript
js实现宇宙星空背景效果的方法
Mar 03 #Javascript
Angular中的Promise对象($q介绍)
Mar 03 #Javascript
Javascript设计模式之观察者模式的多个实现版本实例
Mar 03 #Javascript
Node.js 学习笔记之简介、安装及配置
Mar 03 #Javascript
You might like
PHP代码实现表单数据验证类
2015/07/28 PHP
分享PHP-pcntl 实现多进程代码
2016/09/30 PHP
php 人员权限管理(RBAC)实例(推荐)
2017/05/24 PHP
Laravel中如何轻松容易的输出完整的SQL语句
2020/07/26 PHP
PHP重载基础知识回顾
2020/09/10 PHP
event.currentTarget与event.target的区别介绍
2012/12/31 Javascript
jquery ajax属性async(同步异步)示例
2013/11/05 Javascript
extjs_02_grid显示本地数据、显示跨域数据
2014/06/23 Javascript
jQuery判断checkbox是否选中的3种方法
2014/08/12 Javascript
JS实现页面载入时随机显示图片效果
2016/09/07 Javascript
iOS + node.js使用Socket.IO框架进行实时通信示例
2017/04/14 Javascript
AngularJS 异步解决实现方法
2017/06/12 Javascript
vue和webpack打包项目相对路径修改的方法
2018/06/15 Javascript
vue拖拽组件 vuedraggable API options实现盒子之间相互拖拽排序
2019/07/08 Javascript
Vue 动态路由的实现及 Springsecurity 按钮级别的权限控制
2019/09/05 Javascript
vue中提示$index is not defined错误的解决方式
2020/09/02 Javascript
[07:54]DOTA2 MV《我的动力鞋》 ImbaTV 出品
2014/11/21 DOTA
[56:24]DOTA2上海特级锦标赛主赛事日 - 3 胜者组第二轮#1Liquid VS MVP.Phx第二局
2016/03/04 DOTA
python实现每次处理一个字符的三种方法
2014/10/09 Python
浅析Python基础-流程控制
2016/03/18 Python
python实现简单中文词频统计示例
2017/11/08 Python
Python iter()函数用法实例分析
2018/03/17 Python
Django使用paginator插件实现翻页功能的实例
2018/10/24 Python
Django REST framework内置路由用法
2019/07/26 Python
新加坡最早生产电动滑板车的制造商之一:FunsToTheFore
2020/09/08 全球购物
简述数组与指针的区别
2014/01/02 面试题
EJB发布WEB服务一般步骤
2012/10/31 面试题
MYSQL基础面试题
2012/05/13 面试题
经贸日语毕业生自荐信
2013/11/03 职场文书
小区门卫工作职责
2013/12/14 职场文书
护士优质服务演讲稿
2014/08/26 职场文书
先进集体事迹材料范文
2014/12/25 职场文书
抗洪救灾感谢信
2015/01/22 职场文书
安全承诺书格式范本
2015/04/28 职场文书
教师工作证明范本
2015/06/12 职场文书
鲁滨逊漂流记读书笔记
2015/06/26 职场文书