Das Beispiel in diesem Artikel beschreibt die Implementierungsmethode des JS-Feuerwerks-Hintergrundeffekts. Teilen Sie es als Referenz mit allen. Die spezifische Implementierungsmethode lautet wie folgt: Code kopieren Der Code lautet wie folgt: 又一个很酷的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 /> Funktion 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 /> Funktion happyNewYear(){<br /> neues Feuerwerk();<br /> }<br /> setInterval(happyNewYear,1000);<br /> }<br /> <br>
