Simple fireworks special effects code implemented in JavaScript

Home

Web Front-end

JS Tutorial

Simple fireworks special effects code implemented in JavaScript_javascript skills

May 16, 2016 pm 03:35 PM

javascript

The example in this article describes the simple fireworks special effects code implemented in JavaScript. Share it with everyone for your reference, the details are as follows:

This is a JavaScript firework special effect. Put it on your webpage during the Chinese New Year to wish everyone a happy Year of the Ox. Isn’t it great?

The screenshot of the running effect is as follows:

The online demo address is as follows:

http://demo.jb51.net/js/2015/js-yh-explode-style-demo/

The specific code is as follows:

&lt;!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"&gt;
&lt;html xmlns="http://www.w3.org/1999/xhtml"&gt;
&lt;head&gt;
&lt;meta http-equiv="Content-Type" content="text/html; charset=gb2312" /&gt;
&lt;title&gt;礼花特效&lt;/title&gt;
&lt;style type="text/css"&gt;
 html,body{background:#000; height:100%; margin:0px; padding:0px;color:#FFF;}
 .ball{color:#FF0000; position:absolute; font-size:16px;}
 .star{color:#FF0000; position:absolute; font-size:4px;}
&lt;/style&gt;
&lt;script type="text/javascript"&gt;
function Fireworks(sky, loop){
 this.sky = sky;
 this.skyWidth = document.body.clientWidth || document.documentElement.clientWidth;
 this.skyHeight= document.body.clientHeight || document.documentElement.clientHeight;
 this.x = this.y = 0;
 this.step = 20;
 this.delay = 30;
 this.stars = [];
 this.r = 10;
 this.step2 = 7;
 this.radius = 90;
 this.angle = 45;
 this.num = 16;
 this.loop = loop;
 this.degree = 2;
 this.t = 0;
 this.delt = 0;
 this.max = 30;
 this.cur = 1;
 this.points = null;
}
Fireworks.prototype = {
 init : function(){
  this.x = parseInt(this.skyWidth/1.3 * Math.random()) + this.skyWidth / 8;
  this.y = this.skyHeight;
  this._y = parseInt((this.skyHeight / 4) * Math.random()) + this.skyHeight / 5;
 },
 setOpacity : function(obj, p){
  if(p &gt; 85){
   var opacity = 100 - (p - 85) * 4;
   if(document.all){
    obj.style.filter = "alpha(opacity=" + opacity + ")"; 
   }else{
    obj.style.MozOpacity = opacity / 100;
   }
  }
 },
 getNextPoint : function(degree, coeff, t){
  var tt = 1.0 - t;
  for(var rr = 1; rr &lt;= degree; rr++){
   for(var i=0; i &lt;= degree-rr; i++){
    coeff[i] = tt * coeff[i] + t * coeff[i+1];
   }
  }
  return coeff[0];
 },
 showBall : function(){
  this.ball = document.createElement("div");
  this.ball.innerHTML = "●";
  this.ball.className = "ball";
  this.ball.style.left = this.x + "px";
  this.ball.style.top = this.y + "px";
  this.sky.appendChild(this.ball);
 },
 moveBall : function(){
  var self = this;
  if(this.y &gt; this._y){
   var p = parseInt((this.skyHeight - this.y) / (this.skyHeight - this._y)*10);
   this.y -= (this.step - p * 1.6);
   this.ball.style.fontSize = 16 - p + "px";
   this.ball.style.top = this.y + "px";
   setTimeout(function(){self.moveBall();}, this.delay);
  }else{
   this.fire();
  }
 },
 hideBall : function(){
  this.sky.removeChild(this.ball);
  this.ball = null;
 },
 showStars : function(){
  var colors = ['#FF0000','#FF00FF','#00FF00','#00FFFF','#FFFF00','#FF0000','#FF00FF','#00FF00','#00FFFF','#FFFF00'];
  var n = cs = parseInt(Math.random() * colors.length / 2);
  var cc = parseInt(Math.random() * colors.length / 2);
  var colorMode = parseInt(Math.random() * 2);
  var star = Math.round(Math.random()) == 1 &#63; "★" : "☆";
  this.r = 10;
  this.radius = Math.round(Math.random() * 30) + 60;
  this.num = Math.round(Math.random() * 5 + 5) * 2;
  this.angle = 180 / this.num * 2;
  for(var i=1; i&lt;=this.num; i++){
   this.stars[i] = document.createElement("div");
   this.stars[i].innerHTML = star;
   this.stars[i].className = "star";
   if(colorMode == 1){
    this.stars[i].style.color = colors[n];
    if(++n &gt; cs + cc)
     n = cs;
   }else{
    this.stars[i].style.color = colors[parseInt(Math.random() * colors.length)];
   }
   this.sky.appendChild(this.stars[i]);
  }
 },
 moveStars : function(){
  var self = this;
  if(this.r &lt; this.radius){
   var p = this.step2 - parseInt(this.r / this.radius * 5);
   p = p &lt; 1 &#63; 1 : p;
   this.r += p;
   p = parseInt(this.r / this.radius * 100);
   for(var i=1; i&lt;=this.num; i++){
    this.stars[i].style.left = this.x - Math.round(this.r * Math.sin(Math.PI - (Math.PI / 180 * this.angle * i))) + "px";
    this.stars[i].style.top = this.y - Math.round(this.r * Math.cos(Math.PI - (Math.PI / 180 * this.angle * i))) + "px";
    this.stars[i].style.fontSize = 4 + p/10 + "px";
    this.setOpacity(this.stars[i], p);
   }
   setTimeout(function(){self.moveStars();}, this.delay);
  }else{
   setTimeout(function(){self.hideStars();}, 200 * Math.random());
  }
 },
 initBezier : function(){
  var coeff_x = [];
   var coeff_y = [];
  this.points = [];
  this.t = 0;
  this.delt = 1.0 / this.max;
  this.cur = 1;
  var a = parseInt(Math.random() * 5) * 90;
  coeff_x[0] = this.x;
  coeff_y[0] = this.y;
  for(var i=1; i&lt;=this.num; i++){
   coeff_x[1] = this.x + Math.sin(Math.PI - (Math.PI / 180 * this.angle * i)) * this.radius/2;
   coeff_y[1] = this.y + Math.cos(Math.PI - (Math.PI / 180 * this.angle * i)) * this.radius/2;
   coeff_x[2] = this.x + Math.sin(Math.PI - (Math.PI / 180 * (a-this.angle * i))) * this.radius;
   coeff_y[2] = this.y + Math.cos(Math.PI - (Math.PI / 180 * (a-this.angle * i))) * this.radius;
   this.points[(i-1)*2] = coeff_x.slice(0);
   this.points[(i-1)*2+1] = coeff_y.slice(0);
  }
 },
 moveStars2 : function(){
  var self = this;
  if(this.cur &lt; this.max){
   this.t += this.delt;
   this.cur++;
   p = parseInt(this.cur / this.max * 100);
   for(var i=1; i&lt;=this.num; i++){
    this.stars[i].style.left = this.getNextPoint(this.degree, this.points[(i-1)*2], this.t) + "px";
    this.stars[i].style.top = this.getNextPoint(this.degree, this.points[(i-1)*2+1], this.t) + "px";
    this.stars[i].style.fontSize = 4 + p/10 + "px";
    this.setOpacity(this.stars[i], p);
   }
   setTimeout(function(){self.moveStars2();}, this.delay);
  }else{
   setTimeout(function(){self.hideStars();}, 200 * Math.random());
  }
 },
 hideStars : function(){
  for(var i=1; i&lt;=this.num; i++){
   this.sky.removeChild(this.stars[i]);
   this.stars[i] = null;
   if(this.points != null){
    delete this.points[(i-1)*2];
    delete this.points[(i-1)*2+1];
   }
  }
  if(this.points){
   delete this.points;
  }
  this.points = null;
  if(this.loop){
   this.play();
  }
 },
 fire : function(){
  this.hideBall();
  this.showStars();
  var effect = parseInt(Math.random() * 2) + 1;
  switch(effect){
   case 1:
    this.moveStars();
    break;
   case 2:
    this.initBezier();
    this.moveStars2();
    break;
  }
 },
 play : function(){
  this.init();
  this.showBall();
  this.moveBall();
 }
};
window.onload = function(){
 for(var i=0; i&lt;5; i++)
  new Fireworks(document.body, true).play();
};
&lt;/script&gt;
&lt;/head&gt;
&lt;body&gt;
&lt;/body&gt;
&lt;/html&gt;

Copy after login

I hope this article will be helpful to everyone in JavaScript programming.

Statement of this Website

The content of this article is voluntarily contributed by netizens, and the copyright belongs to the original author. This site does not assume corresponding legal responsibility. If you find any content suspected of plagiarism or infringement, please contact admin@php.cn