Kaedah pelaksanaan kesan latar belakang bunga api JS kemahiran_javascript

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烟花背景特效 var bunga api = function(){ ini.saiz = 20; this.rise(); } bunga api.prototaip = { color:function(){ var c = ['0','3','6','9','c','f']; var t = [c[Math.floor(Math.random()*100)%6],'0','f']; t.sort(function(){return Math.random()>0.5?-1:1;}); kembalikan '#' t.join(''); }, aheight:function(){ var h = document.documentElement.clientHeight-250; kembalikan Math.abs(Math.floor(Math.random()*h-200)) 201; }, mercun:function(){ var b = document.createElement('div'); var w = document.documentElement.clientWidth; b.style.position = 'mutlak'; b.style.color = this.color(); b.style.bottom = 0; b.style.left = Math.floor(Math.random()*w) 1 'px'; document.body.appendChild(b); kembali b; }, rise:function(){ var o = this.firecracker(); var n = this.aheight(); var c = this.color; var e = this.expl; var s = this.size; var k = n; var m = function(){ o.style.bottom = parseFloat(o.style.bottom) k*0.1 'px'; k-=k*0.1; jika(k clearInterval(clear); e(o,n,s,c); } } o.innerHTML = '.'; if(parseInt(o.style.bottom) var clear = setInterval(m,20); } }, expl:function(o,n,s,c){ var R=n/3,Ri=n/6,Rii=n/9; var r=0,ri=0,rii=0; untuk(var i=0;i var span = document.createElement('span'); var p = document.createElement('i'); var a = document.createElement('a'); span.style.position = 'mutlak'; span.style.fontSize = n/10 'px'; span.style.left = 0; span.style.top = 0; span.innerHTML = '*'; p.style.position = 'mutlak'; p.style.left = 0; p.style.top = 0; p.innerHTML = '*'; a.style.position = 'mutlak'; a.style.left = 0; a.style.top = 0; a.innerHTML = '*'; o.appendChild(span); o.appendChild(p); o.appendChild(a); } fungsi spr(){ r = R*0.1; ri = Ri*0.06; rii = Rii*0.06; sp = o.getElementsByTagName('span'); p = o.getElementsByTagName('i'); a = o.getElementsByTagName('a'); untuk(var i=0; i sp[i].style.color = c(); p[i].style.color = c(); a[i].style.color = c(); sp[i].style.left=r*Math.cos(360/s*i) 'px'; sp[i].style.top=r*Math.sin(360/s*i) 'px'; sp[i].style.fontSize=parseFloat(sp[i].style.fontSize)*0.96 'px'; p[i].style.left=ri*Math.cos(360/s*i) 'px'; p[i].style.top=ri*Math.sin(360/s*i) 'px'; p[i].style.fontSize=parseFloat(sp[i].style.fontSize)*0.96 'px'; a[i].style.left=rii*Math.cos(360/s*i) 'px'; a[i].style.top=rii*Math.sin(360/s*i) 'px'; a[i].style.fontSize=parseFloat(sp[i].style.fontSize)*0.96 'px'; } R-=R*0.1; jika(R o.innerHTML = ''; o.parentNode.removeChild(o); clearInterval(clearI); } } var clearI = setInterval(spr,20); } } window.onload = function(){ fungsi happyNewYear(){ bunga api baharu(); } setInterval(happyNewYear,1000); } Kesan operasi adalah seperti berikut:

Saya harap artikel ini akan membantu reka bentuk pengaturcaraan JavaScript semua orang.