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 相关文章推荐
用Javascript同时提交多个Web表单的方法
Dec 26 Javascript
JavaScript和JQuery实用代码片段(一)
Apr 07 Javascript
CSS和JS标签style属性对照表(方便js开发的朋友)
Nov 11 Javascript
JavaScript高级程序设计 阅读笔记(七) ECMAScript中的语句
Feb 27 Javascript
Angular4 中常用的指令入门总结
Jun 12 Javascript
关于javascript作用域的常见面试题分享
Jun 18 Javascript
js断点调试经验分享
Dec 08 Javascript
JavaScript满天星导航栏实现方法
Mar 08 Javascript
vue单页应用在页面刷新时保留状态数据的方法
Sep 21 Javascript
微信小程序判断页面是否从其他页面返回的实例代码
Jul 03 Javascript
JS中的算法与数据结构之栈(Stack)实例详解
Aug 20 Javascript
layui prompt 设置允许空白提交的方法
Sep 24 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 加密解密内部算法
2010/04/22 PHP
php中$_GET与$_POST过滤sql注入的方法
2014/11/03 PHP
PHP实现的sqlite数据库连接类
2014/12/12 PHP
PHP简单获取多个checkbox值的方法
2016/06/13 PHP
DEDE实现转跳属性文档在模板上调用出转跳地址
2016/11/04 PHP
根据分辨率不同,调用不同的css文件
2006/08/25 Javascript
Mootools 1.2教程 Tooltips
2009/09/15 Javascript
jquery下动态显示jqGrid以及jqGrid的属性设置容易出现问题的解决方法
2010/10/22 Javascript
使用JavaScript 实现各种跨域的方法
2013/05/08 Javascript
鼠标移动到图片名上,显示图片的简单实例
2013/07/14 Javascript
对于Form表单reset方法的新认识
2014/03/05 Javascript
JavaScript函数详解
2015/02/27 Javascript
浅析JSONP技术原理及实现
2016/06/08 Javascript
Bootstrap框架实现广告轮播效果
2016/11/28 Javascript
浅析Ajax语法
2016/12/05 Javascript
使用base64对图片的二进制进行编码并用ajax进行显示
2017/01/03 Javascript
AngularJS 使用ng-repeat报错 [ngRepeat:dupes]
2017/01/19 Javascript
Node.js查找当前目录下文件夹实例代码
2017/03/07 Javascript
常用的js方法合集
2017/03/10 Javascript
jQuery开源组件BootstrapValidator使用详解
2017/06/29 jQuery
JS中的算法与数据结构之栈(Stack)实例详解
2019/08/20 Javascript
Element Tooltip 文字提示的使用示例
2020/07/26 Javascript
[38:38]完美世界DOTA2联赛PWL S3 access vs Rebirth 第二场 12.17
2020/12/18 DOTA
跟老齐学Python之不要红头文件(2)
2014/09/28 Python
Python lambda和Python def区别分析
2014/11/30 Python
Python查找相似单词的方法
2015/03/05 Python
Python将xml和xsl转换为html的方法
2015/03/10 Python
tensorflow构建BP神经网络的方法
2018/03/12 Python
python安装第三方库如xlrd的方法
2020/10/31 Python
清除canvas画布内容(点擦除+线擦除)
2020/08/12 HTML / CSS
英国家电购物网站:Sonic Direct
2019/03/26 全球购物
Love, Bonito国际官网:新加坡女装品牌
2021/03/13 全球购物
如何提高MySql的安全性
2014/06/19 面试题
大学生怎样进行自我评价
2013/12/07 职场文书
放弃继承权公证书
2015/01/23 职场文书
单方投资意向书
2015/05/11 职场文书