Contoh dalam artikel ini menerangkan kaedah pelaksanaan kesan latar belakang bunga api JS. Kongsikan dengan semua orang untuk rujukan anda. Kaedah pelaksanaan khusus adalah seperti berikut: Salin kod Kod adalah seperti berikut: 又一个很酷的JS烟花背景特效 <br> var bunga api = function(){<br> ini.saiz = 20;<br> this.rise();<br> }<br> bunga api.prototaip = {<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> kembalikan '#' t.join('');<br> },<br> aheight:function(){<br> var h = document.documentElement.clientHeight-250;<br> kembalikan Math.abs(Math.floor(Math.random()*h-200)) 201;<br> },<br> mercun:function(){<br> var b = document.createElement('div');<br> var w = document.documentElement.clientWidth;<br> b.style.position = 'mutlak';<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> kembali 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> jika(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 /> untuk(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 = 'mutlak';<br /> span.style.fontSize = n/10 'px';<br /> span.style.left = 0;<br /> span.style.top = 0;<br /> span.innerHTML = '*';<br /> p.style.position = 'mutlak';<br /> p.style.left = 0;<br /> p.style.top = 0;<br /> p.innerHTML = '*';<br /> a.style.position = 'mutlak';<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 /> fungsi 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 /> untuk(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 /> jika(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 /> fungsi happyNewYear(){<br /> bunga api baharu();<br /> }<br /> setInterval(happyNewYear,1000);<br /> }<br /> </skrip><br> <style type="text/css"><br> </style><br> </head><br><body style="background:#000;font:12px Georgia, 'Times New Roman', Times, serif"><br> </body><br> </html><br> </div> <p>Kesan operasi adalah seperti berikut: </p> <p><img src="http://files.jb51.net/file_images/article/201503/201533105113715.jpg?201523105127" alt=""></p> <p>Saya harap artikel ini akan membantu reka bentuk pengaturcaraan JavaScript semua orang. </p>
![[Web front-end] Permulaan pantas Node.js](https://img.php.cn/upload/course/000/000/067/662b5d34ba7c0227.png)
