JS基于面向对象实现的放烟花效果


Posted in Javascript onMay 07, 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>
<style type="text/css">
html,body{overflow:hidden;}
body,div,p{margin:0;padding:0;}
body{background:#000;font:12px/1.5 arial;color:#7A7A7A;}
a{text-decoration:none;outline:none;}
#tips,#copyright{position:absolute;width:100%;height:50px;text-align:center;background:#171717;border:2px solid #484848;}
#tips{top:0;border-width:0 0 2px;}
#tips a{font:14px/30px arial;color:#FFF;background:#F06;display:inline-block;margin:10px 5px 0;padding:0 15px;border-radius:15px;}
#tips a.active{background:#FE0000;}
#copyright{bottom:0;line-height:50px;border-width:2px 0 0;}
#copyright a{color:#FFF;background:#7A7A7A;padding:2px 5px;border-radius:10px;}
#copyright a:hover{background:#F90;}
p{position:absolute;top:55px;width:100%;text-align:center;}
</style>
<script type="text/javascript">
var fgm = {
 on: function(element, type, handler) {
 return element.addEventListener ? element.addEventListener(type, handler, false) : element.attachEvent("on" + type, handler)
 },
 un: function(element, type, handler) {
 return element.removeEventListener ? element.removeEventListener(type, handler, false) : element.detachEvent("on" + type, handler)
 },
 bind: function(object, handler) {
 return function() {
  return handler.apply(object, arguments) 
 } 
 },
 randomRange: function(lower, upper) {
 return Math.floor(Math.random() * (upper - lower + 1) + lower) 
 },
 getRanColor: function() {
 var str = this.randomRange(0, 0xFFFFFF).toString(16);
 while(str.length < 6) str = "0" + str;
 return "#" + str 
 }
};
//初始化对象
function FireWorks() {
 this.type = 0;
 this.timer = null;
 this.fnManual = fgm.bind(this, this.manual)
}
FireWorks.prototype = {
 initialize: function() {
 clearTimeout(this.timer);
 fgm.un(document, "click", this.fnManual);
 switch(this.type) {
  case 1:
  fgm.on(document, "click", this.fnManual);
  break;
  case 2:
  this.auto();
  break;
 };
 },
 manual: function(event) {
 event = event || window.event;
 this.__create__({
  x: event.clientX,
  y: event.clientY 
 });
 },
 auto: function ()
 {
 var that = this;
 that.timer = setTimeout(function() {  
  that.__create__({
  x: fgm.randomRange(50, document.documentElement.clientWidth - 50),
  y: fgm.randomRange(50, document.documentElement.clientHeight - 150)
  }) 
  that.auto();
 }, fgm.randomRange(900, 1100))
 },
 __create__: function (param)
 {
 var that = this;
 var oEntity = null;
 var oChip = null;
 var aChip = [];
 var timer = null;
 var oFrag = document.createDocumentFragment();
 oEntity = document.createElement("div");
 with(oEntity.style) {
  position = "absolute";
  top = document.documentElement.clientHeight + "px";
  left = param.x + "px";
  width = "4px";
  height = "30px";
  borderRadius = "4px";
  background = fgm.getRanColor();
 };
 document.body.appendChild(oEntity);
 oEntity.timer = setInterval(function() {
  oEntity.style.top = oEntity.offsetTop - 20 + "px";
  if(oEntity.offsetTop <= param.y) {
  clearInterval(oEntity.timer);
  document.body.removeChild(oEntity);
  (function() {
   //在50-100之间随机生成碎片
   //由于IE浏览器处理效率低, 随机范围缩小至20-30
   //自动放烟花时, 随机范围缩小至20-30
   var len = (/msie/i.test(navigator.userAgent) || that.type == 2) ? fgm.randomRange(20, 30) : fgm.randomRange(50, 100)   
   for (i = 0; i < len; i++) {
   oChip = document.createElement("div");
   with(oChip.style) {
    position = "absolute";
    top = param.y + "px";
    left = param.x + "px";
    width = "4px";
    height = "4px";
    overflow = "hidden";
    borderRadius = "4px";
    background = fgm.getRanColor();  
   };
   oChip.speedX = fgm.randomRange(-20, 20);
   oChip.speedY = fgm.randomRange(-20, 20);
   oFrag.appendChild(oChip);
   aChip[i] = oChip
   };
   document.body.appendChild(oFrag);
   timer = setInterval(function() {
   for(i = 0; i < aChip.length; i++) {
    var obj = aChip[i];
    with(obj.style) {
    top = obj.offsetTop + obj.speedY + "px";
    left = obj.offsetLeft + obj.speedX + "px";
    };
    obj.speedY++;
    (obj.offsetTop < 0 || obj.offsetLeft < 0 || obj.offsetTop > document.documentElement.clientHeight || obj.offsetLeft > document.documentElement.clientWidth) && (document.body.removeChild(obj), aChip.splice(i, 1))
   };
   !aChip[0] && clearInterval(timer);
   }, 30)
  })()
  }
 }, 30)
 }
};
fgm.on(window, "load", function() {
 var oTips = document.getElementById("tips");
 var aBtn = oTips.getElementsByTagName("a");
 var oFireWorks = new FireWorks();
 fgm.on(oTips, "click", function(event) {
 var oEvent = event || window.event;
 var oTarget = oEvent.target || oEvent.srcElement;
 var i = 0;
 if(oTarget.tagName.toUpperCase() == "A") {
  for(i = 0; i < aBtn.length; i++) aBtn[i].className = "";
  switch(oTarget.id) {
  case "manual":
   oFireWorks.type = 1;
   break;
  case "auto":
   oFireWorks.type = 2;
   break;
  case "stop":
   oFireWorks.type = 0;
   break;
  }
  oFireWorks.initialize();
  oTarget.className = "active";
  oEvent.stopPropagation ? oEvent.stopPropagation() : oEvent.cancelBubble = true
 }
 });
});
fgm.on(document, "contextmenu", function(event) {
 var oEvent = event || window.event;
 oEvent.preventDefault ? oEvent.preventDefault() : oEvent.returnValue = false
});
</script>
</head>
<body>
<div id="tips"><a id="manual" href="javascript:;">手动放烟花</a><a id="auto" href="javascript:;">自动放烟花</a><a id="stop" href="javascript:;">停止放烟花</a></div>
<p>由于浏览器渲染能力有限, 当浏览器为IE或选择自动放烟花时, 随机生成的烟花碎片范围自动调整至20-30</p>
<div id="copyright">建议使用Firefox, Chrome浏览器预览效果. By — Ferris, QQ:21314130</div>
</body>
</html>

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

Javascript 相关文章推荐
javascript编程起步(第七课)
Feb 27 Javascript
JavaScript包装对象使用介绍
Aug 29 Javascript
jquery live()调用不存在的解决方法
Feb 26 Javascript
Javascript异步编程模型Promise模式详细介绍
May 08 Javascript
JS限制文本框只能输入数字和字母方法
Feb 28 Javascript
JavaScript去除数组里重复值的方法
Jul 13 Javascript
JS实现网页上随滚动条滚动的层效果代码
Nov 04 Javascript
Node.js 进程平滑离场剖析小结
Jan 24 Javascript
JS实现二维数组元素的排列组合运算简单示例
Jan 28 Javascript
vue实现element表格里表头信息提示功能(推荐)
Nov 20 Javascript
vue使用自定义事件的表单输入组件用法详解【日期组件与货币组件】
Jun 01 Javascript
vite+vue3.0+ts+element-plus快速搭建项目的实现
Jun 24 Vue.js
jquery中trigger()无法触发hover事件的解决方法
May 07 #Javascript
javascript实现的图片切割多块效果实例
May 07 #Javascript
javascript中indexOf技术详解
May 07 #Javascript
javascript限制文本框输入值类型的方法
May 07 #Javascript
浅谈Javascript的静态属性和原型属性
May 07 #Javascript
ECMAScript5(ES5)中bind方法使用小结
May 07 #Javascript
JS中获取函数调用链所有参数的方法
May 07 #Javascript
You might like
php 修改、增加xml结点属性的实现代码
2013/10/22 PHP
php教程之phpize使用方法
2014/02/12 PHP
PHP中读取文件的8种方法和代码实例
2014/08/05 PHP
php简单处理XML数据的方法示例
2017/05/19 PHP
laravel框架中表单请求类型和CSRF防护实例分析
2019/11/23 PHP
为JavaScript类型增加方法的实现代码(增加功能)
2011/12/29 Javascript
JQuery防止退格键网页后退的实现代码
2012/03/23 Javascript
javascript实时显示北京时间的方法
2015/03/12 Javascript
分步解析JavaScript实现tab选项卡自动切换功能
2016/01/25 Javascript
10道典型的JavaScript面试题
2017/03/22 Javascript
AngularJS 单选框及多选框的双向动态绑定
2017/04/20 Javascript
javascript 产生随机数的几种方法总结
2017/09/26 Javascript
ES6 javascript中class静态方法、属性与实例属性用法示例
2017/10/30 Javascript
对angular 实时更新模板视图的方法$apply详解
2018/10/09 Javascript
[01:05:07]DOTA2-DPC中国联赛 正赛 DLG vs Dragon BO3 第一场2月1日
2021/03/11 DOTA
python处理json数据中的中文
2014/03/06 Python
使用Python的Flask框架表单插件Flask-WTF实现Web登录验证
2016/07/12 Python
PyQt5每天必学之像素图控件QPixmap
2018/04/19 Python
python单例模式获取IP代理的方法详解
2018/09/13 Python
python 读取鼠标点击坐标的实例
2018/12/29 Python
numpy基础教程之np.linalg
2019/02/12 Python
Python任意字符串转16, 32, 64进制的方法
2019/06/12 Python
pytorch查看模型weight与grad方式
2020/06/24 Python
Python远程方法调用实现过程解析
2020/07/28 Python
matplotlib之属性组合包(cycler)的使用
2021/02/24 Python
Arti-shopping中文官网:大型海外商品一站式直邮平台
2020/03/23 全球购物
公司市场部岗位职责
2013/12/02 职场文书
和谐社区口号
2014/06/19 职场文书
求职自我推荐信
2014/06/25 职场文书
2014年除四害工作总结
2014/12/06 职场文书
给老婆的保证书
2015/01/16 职场文书
中国汉字听写大会观后感
2015/06/02 职场文书
入党自传范文2015
2015/06/26 职场文书
因个人工作失误检讨书
2019/06/21 职场文书
java固定大小队列的几种实现方式详解
2021/07/15 Java/Android
Spring-cloud Config Server的3种配置方式
2021/09/25 Java/Android