Dieser Artikel beschreibt die Implementierungsmethode des JS -Firework -Hintergrundeffekts. Teilen Sie es für Ihre Referenz. Die spezifische Implementierungsmethode lautet wie folgt:
Die Codekopie lautet wie folgt:
<! DocType html public "-// w3c // dtd xhtml 1.0 transitional // en" "http://www.w3.org/tr/xhtml1/dtd/xhtml1-transsitional.dtd">
<html xmlns = "http://www.w3.org/1999/xhtml">
<kopf>
<meta http-äquiv = "content-type" content = "text /html; charset = utf-8" />
<titels> Ein weiterer cooler JS -Feuerwerk Hintergrundeffekt </title>
<script type = "text/javaScript">
var fireworks = function () {
this.size = 20;
this.rise ();
}
fireworks.prototype = {
Farbe: 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 ('');
},
voraus: function () {
var h = document.documentElement.clientHeight-25;
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 = 'absolut';
b.Style.color = this.color ();
b.Style.bottom = 0;
b.Style.left = math.floor (math.random ()*w)+1+'px';
document.body.appendchild (b);
Rückkehr B;
},
Aufstieg: 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 (klar);
E (O, N, S, C);
}
}
O.innerhtml = '.';
if (parseInt (o.style.bottom) <n) {
var clear = setInterval (m, 20);
}
},
Expl: Funktion (o, n, s, c) {
var r = n/3, ri = n/6, ri = n/9;
var r = 0, ri = 0, rii = 0;
für (var i = 0; i <s; i ++) {
var span = document.createelement ('span');
var p = document.createelement ('i');
var a = document.createelement ('a');
span.style.position = 'absolut';
span.style.fontSize = n/10+'px';
span.style.left = 0;
span.style.top = 0;
span.innerhtml = '*';
P.Style.position = 'absolut';
P.Style.Left = 0;
p.Style.top = 0;
P.InnerHtml = '*';
A.Style.position = 'absolut';
A.Style.Left = 0;
A.Style.top = 0;
A.innerhtml = '*';
O.Appendchild (Span);
O.Appendchild (p);
O.Appendchild (a);
}
Funktion 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');
für (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 clear = setInterval (Spr, 20);
}
}
window.onload = function () {
Funktion HappyNewyear () {
neues Feuerwerk ();
}
setInterval (HappyNewyear, 1000);
}
</script>
<style type = "text/css">
</style>
</head>
<body style = "Hintergrund:#000; Schrift: 12px Georgia, 'Times New Roman', Times, Serif">
</body>
</html>
Der Betriebseffekt ist wie folgt:
Ich hoffe, dieser Artikel wird für JavaScript -Programme aller hilfreich sein.