本文实例讲述了JavaScript实现的简单烟花特效代码。分享给大家供大家参考，具体如下：
这是一款JavaScript烟花特效，过年的时候放到你的网页上祝贺大家牛年大吉吧，是不是很不错？
运行效果截图如下：
在线演示地址如下：
http://demo.jb51.net/js/2015/js-yh-explode-style-demo/
具体代码如下：
<!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=gb2312" /> <title>礼花特效</title> <style type="text/css"> 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;} </style> <script type="text/javascript"> 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 > 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 <= degree; rr++){ for(var i=0; i <= 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 > 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 "; 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<=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 > 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 < this.radius){ var p = this.step2 - parseInt(this.r / this.radius * 5); p = p < 1 ? 1 : p; this.r += p; p = parseInt(this.r / this.radius * 100); for(var i=1; i<=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<=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 < this.max){ this.t += this.delt; this.cur++; p = parseInt(this.cur / this.max * 100); for(var i=1; i<=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<=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<5; i++) new Fireworks(document.body, true).play(); }; </script> </head> <body> </body> </html>
希望本文所述对大家JavaScript程序设计有所帮助。
【JavaScript实现的简单烟花特效代码】相关文章：
★ JavaScript中反正弦函数Math.asin()的使用简介
★ JavaScript实现跑马灯抽奖活动实例代码解析与优化（二）