Cet article décrit la méthode d'implémentation des effets de fond de pluie dynamiques générés par JavaScript. Partagez-le pour votre référence. La méthode de mise en œuvre spécifique est la suivante:
Copiez le code comme suit: <html>
<adal>
<Title> Effet de fond de pluie dynamique généré par JavaScript </Title>
</ Head>
<Corps bgcolor = "# fef4d2">
<Nenter>
<Script Language = JavaScript>
<! - [Step1]: Combien de gouttes de pluie peuvent être définies ici ->
var wrainsize = 40;
<! - [Step2]: Ici, vous pouvez modifier la vitesse de la pluie, la valeur est grande et la vitesse est lente ->
Var Speed = 10;
var x = nouveau array ();
var y = new Array ();
var r = new Array ();
var cx = new Array ();
var cy = new Array ();
var doc_width = document.body.clientwidth;
var doc_height = document.body.clientHeight;
for (i = 0; i <wainsize; ++ i) {
initRain ();
if (i == 0) {
document.write ("<div id = /" dot "+ i +" / "style = /" position: ");
Document.Write ("Absolute; Z-index:" + i + "; visibilité:");
Document.Write ("Visible; top: 15px; gauche: 15px; /"> <font color = / "bleu /"> ");
document.write (", </font> </div>"); }
autre {
document.write ("<div id = /" dot "+ i +" / "style = /" position: ");
Document.Write ("Absolute; Z-index:" + i + "; visibilité:");
Document.Write ("Visible; top: 15px; gauche: 15px; /"> <font color = / "bleu /"> ");
document.write (",. </font> </div>"); }
}
fonction initrain () {
a = 6;
r [i] = 1;
sn = math.sin (a);
cs = math.cos (a);
cx [i] = math.random () * doc_width + 1;
cy [i] = math.random () * doc_height + 1;
x [i] = r [i] * sn + cx [i];
y [i] = cy [i];
}
fonction raindropie () {
for (i = 0; i <wainsize; ++ i) {
Updaterain ();
if ((x [i] <= 1) || (x [i]> = (doc_width - 20)) || (y [i]> = (doc_height - 20))) {
Makerain ();
doc_width = document.body.clientwidth;
doc_height = document.body.clientHeight; }
document.all ["dot" + i] .style.pixeltop = y [i];
document.all ["dot" + i] .style.pixelleft = x [i]; }
setTimeout ("Raindropie ()", Speed);
}
fonction updaterain () {
r [i] + = 10;
x [i] = r [i] * sn + cx [i];
y [i] = r [i] * cs + cy [i];
}
Function Makerain () {
r [i] = 1;
cx [i] = math.random () * doc_width + 1;
cy [i] = 1;
x [i] = r [i] * sn + cx [i];
y [i] = r [i] * cs + cy [i];
}
Raindropie ();
</cript>
</docy>
</html>
J'espère que cet article sera utile à la programmation JavaScript de tous.