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

Рассмотрим использование циклических структур на примере популярного в зимнее время года сценария «Падающий снег». Сначала подготовим снежинку. Желательно использовать изображение в формате 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> - конец веб-страницы.

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

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

Добавить комментарий

Заполняя и отправляя данную форму отправки сообщения, вы принимаете и соглашаетесь с Политикой конфиденциальности сайта.


Защитный код Обновить