이 기사의 예에서는 JS 불꽃놀이 배경 효과의 구현 방법을 설명합니다. 참고할 수 있도록 모든 사람과 공유하세요. 구체적인 구현 방법은 다음과 같습니다. 코드 복사 코드는 다음과 같습니다. 又一个很酷的JS烟꽃背景特效 <br> var 불꽃놀이 = function(){<br> this.size = 20;<br> this.rise();<br> }<br> Fireworks.prototype = {<br> 색상:함수(){<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> 높이:함수(){<br> var h = document.documentElement.clientHeight-250;<br> return Math.abs(Math.floor(Math.random()*h-200)) 201;<br> },<br> 폭죽:함수(){<br> var b = document.createElement('div');<br> var w = document.documentElement.clientWidth;<br> b.style.position = '절대';<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> b를 돌려주세요;<br> },<br> 상승:함수(){<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 = 함수(){<br> o.style.bottom = parsFloat(o.style.bottom) k*0.1 'px';<br> k-=k*0.1;<br> if(k<2){<br /> ClearInterval(클리어);<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:함수(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 스팬 = document.createElement('span');<br /> var p = document.createElement('i');<br /> var a = document.createElement('a');<br /> span.style.position = '절대';<br /> span.style.fontSize = n/10 'px';<br /> span.style.left = 0;<br /> span.style.top = 0;<br /> span.innerHTML = '*';<br /> p.style.position = '절대';<br /> p.style.left = 0;<br /> p.style.top = 0;<br /> p.innerHTML = '*';<br /> a.style.position = '절대';<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 /> 함수 spr(){<br /> r = R*0.1;<br /> 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 = 함수(){<br /> 함수 happyNewYear(){<br /> 새로운 불꽃놀이();<br /> }<br /> setInterval(happyNewYear,1000);<br /> }<br /> <br> </스타일><br> </머리><br><body style="배경:#000;font:12px Georgia, 'Times New Roman', Times, serif"><br> </본문><br> </div>
