本文实例讲述了JS烟花背景效果实现方法。分享给大家供大家参考。具体实现方法如下: 复制代码 代码如下: 又一个很酷的JS烟花背景特效 <br /> var fireworks = function(){<br /> this.size = 20;<br /> this.rise();<br /> }<br /> fireworks.prototype = {<br /> color:function(){<br /> var c = ['0','3','6','9','c','f'];<br /> var t = [c[Math.floor(Math.random()*100)%6],'0','f'];<br /> t.sort(function(){return Math.random()>0.5?-1:1;});<br /> return '#'+t.join('');<br /> },<br /> aheight:function(){<br /> var h = document.documentElement.clientHeight-250;<br /> return Math.abs(Math.floor(Math.random()*h-200))+201;<br /> },<br /> firecracker:function(){<br /> var b = document.createElement('div');<br /> var w = document.documentElement.clientWidth;<br /> b.style.position = 'absolute';<br /> b.style.color = this.color();<br /> b.style.bottom = 0;<br /> b.style.left = Math.floor(Math.random()*w)+1+'px';<br /> document.body.appendChild(b);<br /> return b;<br /> },<br /> rise:function(){<br /> var o = this.firecracker();<br /> var n = this.aheight();<br /> var c = this.color;<br /> var e = this.expl;<br /> var s = this.size;<br /> var k = n;<br /> var m = function(){<br /> o.style.bottom = parseFloat(o.style.bottom)+k*0.1+'px';<br /> k-=k*0.1;<br /> if(k<2){<br /> clearInterval(clear);<br /> e(o,n,s,c);<br /> }<br /> }<br /> o.innerHTML = '.';<br /> if(parseInt(o.style.bottom)<n){<br /> var clear = setInterval(m,20);<br /> }<br /> },<br /> expl:function(o,n,s,c){<br /> var R=n/3,Ri=n/6,Rii=n/9;<br /> var r=0,ri=0,rii=0;<br /> for(var i=0;i<s;i++){<br /> var span = document.createElement('span');<br /> var p = document.createElement('i');<br /> var a = document.createElement('a');<br /> span.style.position = 'absolute';<br /> span.style.fontSize = n/10+'px';<br /> span.style.left = 0;<br /> span.style.top = 0;<br /> span.innerHTML = '*';<br /> p.style.position = 'absolute';<br /> p.style.left = 0;<br /> p.style.top = 0;<br /> p.innerHTML = '*';<br /> a.style.position = 'absolute';<br /> a.style.left = 0;<br /> a.style.top = 0;<br /> a.innerHTML = '*';<br /> o.appendChild(span);<br /> o.appendChild(p);<br /> o.appendChild(a);<br /> }<br /> function spr(){<br /> r += R*0.1;<br /> ri+= Ri*0.06;<br /> rii+= Rii*0.06;<br /> sp = o.getElementsByTagName('span');<br /> p = o.getElementsByTagName('i');<br /> a = o.getElementsByTagName('a');<br /> for(var i=0; i<sp.length;i++){<br /> sp[i].style.color = c();<br /> p[i].style.color = c();<br /> a[i].style.color = c();<br /> sp[i].style.left=r*Math.cos(360/s*i)+'px';<br /> sp[i].style.top=r*Math.sin(360/s*i)+'px';<br /> sp[i].style.fontSize=parseFloat(sp[i].style.fontSize)*0.96+'px';<br /> p[i].style.left=ri*Math.cos(360/s*i)+'px';<br /> p[i].style.top=ri*Math.sin(360/s*i)+'px';<br /> p[i].style.fontSize=parseFloat(sp[i].style.fontSize)*0.96+'px';<br /> a[i].style.left=rii*Math.cos(360/s*i)+'px';<br /> a[i].style.top=rii*Math.sin(360/s*i)+'px';<br /> a[i].style.fontSize=parseFloat(sp[i].style.fontSize)*0.96+'px';<br /> }<br /> R-=R*0.1;<br /> if(R<2){<br /> o.innerHTML = '';<br /> o.parentNode.removeChild(o);<br /> clearInterval(clearI);<br /> }<br /> }<br /> var clearI = setInterval(spr,20);<br /> }<br /> }<br /> window.onload = function(){<br /> function happyNewYear(){<br /> new fireworks();<br /> }<br /> setInterval(happyNewYear,1000);<br /> }<br /> <br /> 运行效果如下所示: 希望本文所述对大家的javascript程序设计有所帮助。