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

前端技术 2023/09/07 JavaScript

本文实例讲述了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程序设计有所帮助。

本文地址：https://www.stayed.cn/item/17993

转载请注明出处。

本站部分内容来源于网络,如侵犯到您的权益,请 联系我

我的博客

人生若只如初见，何事秋风悲画扇。

我的标签

随笔档案