이 기사에서는 JS 불꽃 놀이 배경 효과의 구현 방법에 대해 설명합니다. 참조를 위해 공유하십시오. 특정 구현 방법은 다음과 같습니다.
코드 사본은 다음과 같습니다.
<! doctype html public "-// w3c // dtd xhtml 1.0 Transitional // en" "http://www.w3.org/tr/xhtml1/dtd/xhtml1-transitional.dtd">
<html xmlns = "http://www.w3.org/1999/xhtml">
<헤드>
<meta http-equiv = "content-type"content = "text /html; charset = utf-8" />
<title> 또 다른 Cool JS 불꽃 놀이 배경 효과 </title>
<script type = "text/javaScript">
var fireworks = function () {
this.size = 20;
this.rise ();
}
불꽃 놀이. 프로로 타입 = {
색상 : 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;});
return '#'+t.join ( '');
},
앞서 : function () {
var h = document.documentElement.ClientHeight-250;
Return Math.abs (Math.floor (Math.random ()*H-200))+201;
},
Firecracker : function () {
var b = document.createelement ( 'div');
var w = document.documentElement.clientWidth;
b.style.position = '절대';
b.style.color = this.color ();
b.style.bottom = 0;
b.style.left = math.floor (Math.random ()*W)+1+'px';
document.body.appendChild (b);
반환 b;
},
상승 : 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;
if (k <2) {
ClearInterval (Clear);
E (O, N, S, C);
}
}
O.innerhtml = '.';
if (parseint (o.style.bottom) <n) {
var clear = setInterval (m, 20);
}
},
exply : 함수 (o, n, s, c) {
var r = n/3, ri = n/6, ri = n/9;
var r = 0, ri = 0, rii = 0;
for (var i = 0; i <s; i ++) {
var span = document.createelement ( 'span');
var p = document.createelement ( 'i');
var a = document.createelement ( 'a');
span.style.position = '절대';
span.style.fontsize = n/10+'px';
span.style.left = 0;
span.style.top = 0;
span.innerhtml = '*';
p.style.position = '절대';
p.style.left = 0;
p.style.top = 0;
p.innerhtml = '*';
a.style.position = '절대';
a.style.left = 0;
a.style.top = 0;
a.innerhtml = '*';
O. AppendChild (Span);
O. AppendChild (P);
O. AppendChild (a);
}
함수 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');
for (var i = 0; i <sp.length; 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;
if (r <2) {
O.innerhtml = '';
O.parentNode.RemoveChild (O);
ClearInterval (Cleari);
}
}
var cleari = setInterval (SPR, 20);
}
}
Window.onload = function () {
함수 happyNewyear () {
새로운 불꽃 놀이 ();
}
SetInterval (HappyNewyear, 1000);
}
</스크립트>
<스타일 유형 = "텍스트/CSS">
</스타일>
</head>
<바디 스타일 = "배경 :#000; 글꼴 : 12px 조지아, 'Times New Roman', Times, Serif">
</body>
</html>
작동 효과는 다음과 같습니다.
이 기사가 모든 사람의 JavaScript 프로그래밍에 도움이되기를 바랍니다.