이 기사에서는 JavaScript에서 생성 된 동적 레인 배경 효과를 구현하는 방법에 대해 설명합니다. 참조를 위해 공유하십시오. 특정 구현 방법은 다음과 같습니다.
다음과 같이 코드를 복사하십시오. <html>
<헤드>
<title> JavaScript </title>에 의해 생성 된 동적 비 백그라운드 효과
</head>
<body bgcolor = "#fef4d2">
<centre>
<스크립트 언어 = javaScript>
<!-[Step1] : 여기에서 빗방울 수를 설정할 수 있습니다->
var rainsize = 40;
<!-[step2] : 여기서는 비 속도를 바꿀 수 있고, 값이 크고 속도가 느립니다->.
var 속도 = 10;
var x = 새로운 배열 ();
var y = 새로운 배열 ();
var r = new Array ();
var cx = 새로운 배열 ();
var cy = 새로운 배열 ();
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 ( "절대; z- 인덱스 :" + i + "; 가시성 :");
document.write ( "Visible; top : 15px; 왼쪽 : 15px;/"> <font color =/"blue/"> ");
document.write ( ", </font> </div>"); }
또 다른 {
document.write ( "<div id =/"dot " + i +"/"style =/"position : ");
document.write ( "절대; z- 인덱스 :" + i + "; 가시성 :");
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];
}
함수 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 ()", 속도);
}
함수 updaterain () {
r [i] += 10;
x [i] = r [i] * sn + cx [i];
y [i] = r [i] * cs + cy [i];
}
함수 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 ();
</스크립트>
</body>
</html>
이 기사가 모든 사람의 JavaScript 프로그래밍에 도움이되기를 바랍니다.