تصف هذه المقالة طريقة تنفيذ تأثيرات خلفية المطر الديناميكية الناتجة عن JavaScript. شاركه للرجوع إليه. طريقة التنفيذ المحددة هي كما يلي:
انسخ الرمز كما يلي: <html>
<head>
<title> تأثير خلفية المطر الديناميكي الذي تم إنشاؤه بواسطة JavaScript </title>
</head>
<body bgcolor = "#fef4d2">
<centre>
<لغة البرنامج النصي = javaScript>
<!-[Step1]: هنا يمكنك تعيين عدد قطرات المطر->
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 =/" position: ") ؛
document.write ("absolute ؛ z-index:" + i + "؛ الرؤية:") ؛
document.write ("مرئي ؛ أعلى: 15px ؛ اليسار: 15px ؛/"> <font color =/"blue/"> ") ؛
document.write ("، </font> </viv>") ؛ }
آخر {
document.write ("<div id =/" dot " + i +"/"style =/" position: ") ؛
document.write ("absolute ؛ z-index:" + i + "؛ الرؤية:") ؛
document.write ("مرئي ؛ أعلى: 15px ؛ اليسار: 15px ؛/"> <font color =/"blue/"> ") ؛
document.write ("،. </font> </viv>") ؛ }
}
وظيفة initrain () {
أ = 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 للجميع.