Cet article décrit la méthode de mise en œuvre de l'effet de fond de feu d'artifice JS. Partagez-le pour votre référence. La méthode de mise en œuvre spécifique est la suivante:
La copie de code est la suivante:
<! 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">
<adal>
<meta http-equiv = "contenu-type" contenu = "text / html; charset = utf-8" />
<Title> Un autre effet de fond de feu d'artifice cool </Title>
<script type = "text / javascript">
var Fireworks = function () {
this.size = 20;
this.rise ();
}
Fireworks.prototype = {
Couleur: fonction () {
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 ('');
},
Avant: 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 = 'Absolute';
b.style.color = this.color ();
b.style.bottom = 0;
b.style.left = math.floor (math.random () * w) + 1 + 'px';
document.body.ApendChild (b);
retour 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 = fonction () {
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);
}
},
Exp: fonction (o, n, s, c) {
var r = n / 3, ri = n / 6, ri = n / 9;
var r = 0, ri = 0, rii = 0;
pour (var i = 0; i <s; i ++) {
var span = document.CreateElement ('span');
var p = document.CreateElement ('i');
var a = document.CreateElement ('a');
span.style.position = 'absolue';
span.style.fontsize = n / 10 + 'px';
span.style.left = 0;
span.style.top = 0;
span.innerhtml = '*';
p.style.position = 'absolue';
p.style.left = 0;
p.style.top = 0;
p.innerHtml = '*';
a.style.position = 'absolue';
a.style.left = 0;
a.style.top = 0;
a.innerhtml = '*';
O.ApendChild (Span);
O.ApendChild (P);
O.ApendChild (a);
}
fonction 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');
pour (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 () {
fonction happynewyear () {
Nouveaux feux d'artifice ();
}
setInterval (HappyNewyear, 1000);
}
</cript>
<style type = "text / css">
</ style>
</ head>
<Body Style = "Background: # 000; Font: 12px Georgia, 'Times New Roman', Times, Serif">
</docy>
</html>
L'effet de fonctionnement est le suivant:
J'espère que cet article sera utile à la programmation JavaScript de tous.