Este artigo descreve o método de implementação de efeitos dinâmicos de fundo de chuva gerados pelo JavaScript. Compartilhe para sua referência. O método de implementação específico é o seguinte:
Copie o código da seguinte forma: <html>
<head>
<title> Efeito dinâmico de fundo de chuva gerado por javascript </ititle>
</head>
<Corpo bgcolor = "#fef4d2">
<Center>
<idioma do script = javascript>
<!-[Etapa 1]: Aqui você pode definir o número de gotas de chuva->
var Rainsize = 40;
<!-[Etapa2]: Aqui você pode mudar a velocidade da chuva, o valor é grande e a velocidade é lenta->
var velocidade = 10;
var x = new 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;
para (i = 0; i <chuving; ++ i) {
initrain ();
if (i == 0) {
document.write ("<div id =/" dot " + i +"/"style =/" position: ");
Document.Write ("Absoluto; Z-Index:" + i + "; visibilidade:");
document.write ("visível; topo: 15px; esquerda: 15px;/"> <font color =/"azul/"> ");
document.write (", </font> </div>"); }
outro {
document.write ("<div id =/" dot " + i +"/"style =/" position: ");
Document.Write ("Absoluto; Z-Index:" + i + "; visibilidade:");
document.write ("visível; topo: 15px; esquerda: 15px;/"> <font color =/"azul/"> ");
document.write (",. </font> </div>"); }
}
função 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];
}
function raindropie () {
para (i = 0; i <chuving; ++ 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 ("chuva ()", velocidade);
}
função 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 ();
</script>
</Body>
</html>
Espero que este artigo seja útil para a programação JavaScript de todos.