この記事では、JavaScriptによって生成された動的な雨の背景効果を実装する方法について説明します。参照のためにそれを共有してください。特定の実装方法は次のとおりです。
次のようにコードをコピーします：<html>
<head>
<title> javascript </title>によって生成された動的な雨の背景効果
</head>
<body bgcolor = "＃fef4d2">
<center>
<スクリプト言語= javascript>
<！ - [step1]：ここで、雨滴の数を設定できます - >
var Rainsize = 40;
<！ - [ステップ2]：雨の速度を変えることができ、値は大きく、速度が遅い - >
var速度= 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;
for（i = 0; i <rainsize; ++ i）{
initrain（）;
if（i == 0）{
document.write（ "<div id =/" dot " + i +"/"style =/" position： "）;
document.write（ "absolute; z-index：" + i + "; visibility："）;
document.write（ "visible; top：15px;左：15px;/"> <font color =/"blue/"> "）;
document.write（ "、</font> </div>"）; }
それ以外 {
document.write（ "<div id =/" dot " + i +"/"style =/" position： "）;
document.write（ "absolute; z-index：" + i + "; visibility："）;
document.write（ "visible; top：15px;左：15px;/"> <font color =/"blue/"> "）;
document.write（ "、。</font> </div>"）; }
}
関数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（）{
for（i = 0; i <rainsize; ++ 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）;
}
function 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>
この記事がみんなのJavaScriptプログラミングに役立つことを願っています。