Циклический алгоритм. Сценарий «Падающий снег»

Рассмотрим использование циклических структур на примере популярного в зимнее время года сценария «Падающий снег». Сначала подготовим снежинку. Желательно использовать изображение в формате GIF, поскольку он позволяет выполнить рисунок на прозрачном фоне, что в нашем случае критично.

Рассмотрим код более подробно.

<html> - начало веб-страницы.
<head> </head> - заголовок.
<body align=center bgcolor=blue text=yellow onLoad=" sneg () "> - начало тела страницы с определением стиля содержимого: выравнивание объектов - по центру, цвет фона - голубой, цвет текста - желтый, при загрузке страницы вызвать процедуру sneg ().
<h1>Снег кружится, летает, летает. ..</hl> - текст страницы, оформленный наибольшим стилем заголовка.
<img src=2.jpg height=400> - установка базового изображения. В нашем случае взят файл 2 . j pg из предыдущего задания с изображением пингвинов.
</body > - завершение тела документа.
<script> - начало сценария.
var n=3 0 - определение количества повторений для генерации координат снежинок на экране.
for <i=0; i<n; i + +) - цикл. Читается следующим образом: выполнять тело цикла от начального значения счетчика i, равного 1, до тех пор, пока i меньше п, с каждым шагом увеличивая i на Д.
{ - начало тела цикла.
x=Math.round(Math.random()*document.body.clientWidth) - присвоение координате X текущей снежинки случайного числа, лежащего в диапазоне от 0 до ширины текущего окна. Иными словами, при изменении ширины окна снежинки будут генерироваться по всему его полю.
y=Math.round(Math.random()*document.body, cl ientHeight ) - присвоение координате У текущей снежинки случайного числа, лежащего в диапазоне от 0 до высоты текущего окна.
document.write('<img id="img'+i+'"src=snezh.gif style="position:absolute; left:'+x+'; top:'+y+';">'); -вывод на поверхность страницы изображения snezh. j pg с запоминанием персонального идентификатора каждой снежинки по заранее сгенерированным координатам.
} - конец тела цикла.
function sneg () { -начало функции.
for (i=0; i<n; i++ ) - цикл: выполнять тело цикла от начального значения счетчика i, равного 1, до тех пор, пока i меньше п, с каждым шагом увеличивая i на 1.
{ - начало тела цикла.
sn=document. getElementBy Id ( ' img ' +i ) - присвоить переменной sn (серийный номер) элемент с идентификатором imgl, img2, ... imgn текущего документа.
y=parselnt ( sn. style. top) +5 - для координаты F текущего id координата увеличивается на 5 пунктов, и снежинка сдвигается вниз.
if (y>document. body. clientHeight-50 ) - условие, определяющее, сдвинулась ли снежинка вниз за пределы экрана. Величины 50 пунктов вполне достаточно, чтобы весь небольшой рисунок ушел за нижнюю границу окна.
{sn. style. top= "0 рх "} - действие при истинности условия определяет новую координату Y, равную 0.
else {sn. style. top=y+" рх "}-действие при ложности условия, сдвиг снежинки вниз.
} - завершение тела цикла.
setTimeout ( ' sneg ( ) ' , 100 ) - автоматический вызов функции sneg ( ) через 100 мс.
} - завершение тела функции.
</script> - завершение тела сценария.
</html> - конец веб-страницы.

После проделанных манипуляции из предоставленного выше кода, вы сможете наблюдать результат выполнения сценария «Падающий снег»

Тэги: случае, нашем, изображение, выполнить, прозрачном, критично

← JavaScript функции выполняющие сценарий "Простые часы"		Сложные сценарии обработки JS →