บทความนี้อธิบายวิธีการใช้เอฟเฟกต์พื้นหลังฝนแบบไดนามิกที่สร้างขึ้นโดย JavaScript แบ่งปันสำหรับการอ้างอิงของคุณ วิธีการใช้งานเฉพาะมีดังนี้:
คัดลอกรหัสดังนี้: <html>
<head>
<title> เอฟเฟกต์พื้นหลังฝนแบบไดนามิกที่สร้างโดย JavaScript </title>
</head>
<body bgcolor = "#fef4d2">
<enter>
<ภาษาสคริปต์ = JavaScript>
<!-[ขั้นตอนที่ 1]: มีการตั้งค่าเม็ดฝนกี่อันที่นี่->
var rainsize = 40;
<!-[step2]: ที่นี่คุณสามารถเปลี่ยนความเร็วของฝนได้ค่ามีขนาดใหญ่และความเร็วช้า->
var speed = 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;
สำหรับ (i = 0; i <rainsize; ++ i) {
initrain ();
ถ้า (i == 0) {
document.write ("<div id =/" dot " + i +"/"style =/" ตำแหน่ง: ");
document.write ("Absolute; Z-index:" + i + "; การมองเห็น:");
document.write ("มองเห็น; ด้านบน: 15px; ซ้าย: 15px;/"> <font color =/"blue/"> ");
document.write (", </font> </div>"); -
อื่น {
document.write ("<div id =/" dot " + i +"/"style =/" ตำแหน่ง: ");
document.write ("Absolute; Z-index:" + i + "; การมองเห็น:");
document.write ("มองเห็น; ด้านบน: 15px; ซ้าย: 15px;/"> <font color =/"blue/"> ");
document.write (",. </font> </div>"); -
-
ฟังก์ชั่นเริ่มต้น () {
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 () {
สำหรับ (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 ();
</script>
</body>
</html>
ฉันหวังว่าบทความนี้จะเป็นประโยชน์กับการเขียนโปรแกรม JavaScript ของทุกคน