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 相关文章推荐
jquery ui对话框实例代码
May 10 Javascript
js调用图片隐藏&amp;显示实现代码
Sep 13 Javascript
jQuery实现移动端滑块拖动选择数字效果
Dec 24 Javascript
Vue.js教程之计算属性
Nov 11 Javascript
EasyUI Datebox 日期验证之开始日期小于结束时间
May 19 Javascript
使用JS获取页面上的所有标签
Oct 18 Javascript
小程序云开发实战小结
Oct 25 Javascript
ES2020 新特性(种草)
Jan 12 Javascript
使用next.js开发网址缩短服务的方法
Jun 17 Javascript
PHP读取远程txt文档到数组并实现遍历
Aug 25 Javascript
原生js实现贪吃蛇游戏
Oct 26 Javascript
vue集成一个支持图片缩放拖拽的富文本编辑器
Jan 29 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
电脑硬件及电脑配置知识大全
2020/03/17 数码科技
无法载入 mcrypt 扩展,请检查 PHP 配置终极解决方案
2011/07/18 PHP
用PHP和Shell写Hadoop的MapReduce程序
2014/04/15 PHP
PHP程序员常见的40个陋习,你中了几个?
2014/11/20 PHP
ThinkPHP模板Volist标签嵌套循环输出多维数组的方法
2016/03/23 PHP
php版阿里大于(阿里大鱼)短信发送实例详解
2016/11/30 PHP
PHP实现图片的等比缩放和Logo水印功能示例
2017/05/04 PHP
PHP实现的观察者模式实例
2017/06/21 PHP
改进:论坛UBB代码自动插入方式
2006/12/22 Javascript
JavaScript高级程序设计(第3版)学习笔记10 再访js对象
2012/10/11 Javascript
jquery提示效果实例分析
2014/11/25 Javascript
node+express+ejs制作简单页面上手指南
2014/11/26 Javascript
javascript回到顶部特效
2016/07/30 Javascript
JavaScript操作文件_动力节点Java学院整理
2017/06/30 Javascript
10个在JavaScript开发中常遇到的BUG
2017/12/18 Javascript
node实现登录图片验证码的示例代码
2018/04/20 Javascript
vue.js做一个简单的编辑菜谱功能
2018/05/08 Javascript
Js on及addEventListener原理用法区别解析
2020/07/11 Javascript
Python OpenCV利用笔记本摄像头实现人脸检测
2020/08/20 Python
10个Python面试常问的问题(小结)
2019/11/20 Python
python 解决flask uwsgi 获取不到全局变量的问题
2019/12/22 Python
六种酷炫Python运行进度条效果的实现代码
2020/07/17 Python
django有哪些好处和优点
2020/09/01 Python
Python 必须了解的5种高级特征
2020/09/10 Python
如何利用python检测图片是否包含二维码
2020/10/15 Python
利用Python函数实现一个万历表完整示例
2021/01/23 Python
HTML5公共页面提取作为公用代码的方法
2020/06/30 HTML / CSS
软件测试工程师面试问题精选
2016/10/28 面试题
remote接口和home接口主要作用
2013/05/15 面试题
签订劳动合同通知书
2015/04/16 职场文书
书法社团活动总结
2015/05/07 职场文书
不同意离婚上诉状
2015/05/23 职场文书
安娜卡列尼娜观后感
2015/06/11 职场文书
婚庆公司开业主持词
2015/06/30 职场文书
基层医务人员三严三实心得体会
2016/01/05 职场文书
Python如何用re模块实现简易tokenizer
2022/05/02 Python