Практическая работа №12

«Анимация»

Цель работы: Научиться создавать анимационное изображение.
Задачи работы:

1. Получить навыки работы с функцией animate.

Обеспечивающие средства: Сборник описаний практических работ; операционная система Windows XP, программа Internet Explorer; программа «Блокнот»; персональный компьютер.
Требования к отчету: Итоги практической работы представить в виде файла lab12.html на диске.
персональный компьютер.

Технология работы:

1. function openWin(AddressURL,NUM) { if (NUM == 1) {VarWin = "width=300,height=300,status=no,toolbar=no,menubar=no,scrollbars=no"} else {VarWin = "width=500,height=300,status=no,toolbar=no,menubar=no,scrollbars=no"} open(AddressURL,"DWIN"+NUM,VarWin) } Создайте пример анимационного изображения, используя функцию animate. Размер всех картинок - 400x60 пикселей. Кроме кнопок "Быстрее" и "Медленнее", добавить еще кнопки "Стоп" и "Старт" (подумайте, как это можно сделать). Использование данной функции зависит от типа просмотрщика:

2. Сохранить файл как lab12.txt в блокноте и как lab12.html для просмотра в браузере.


Практическая работа №13

Графические часы

Цель работы: Создать графические часы.
Задачи работы:

  • Овладеть методикой работы с функцией clockTick().

Обеспечивающие средства: Сборник описаний практических работ; операционная система Windows XP, программа Internet Explorer; программа «Блокнот»; персональный компьютер.
Требования к отчету: Итоги практической работы представить в виде файла lab13.html на диске.
персональный компьютер.

Технология работы:

Первый пример - это часы, отображающие время загрузки страницы (т.е. момент вызова скрипта). Используются методы объекта Date (getHours, getMinutes) и графические файлы, отображающие полученное время (имена этих файлов соответствуют цифрам 0-9).

Во втором примере, отображающем текущую дату, также используются методы объекта Date (getDate, getMonth, getYear) и графические файлы, отображающие полученную дату.  

Задание - сделать идущие часы.
Для этого:

  • Задать пары для 10 цифр вида
    dig0 = new Image(); dig0.src = "dg0.gif";
  • Создать таблицу, в которой будут выводиться цифры.
  • В таблице использовать команды <IMG> с обязательным атрибутом name:
    <img name="dg1" src="dg0.gif" width=16 height=21>
  • Написать функцию clockTick(), в которой
    • вычисляется текущее время (час, минуты, секунды);
    • с помощью вспомогательной функции setRis() определяется, какая картинка куда выводится;
    • с помощью функции setTimeout("clockTick()", 1000) запускается сама clockTick().
  • Функция setRis() должна иметь два аргумента: первый аргумент - какая цифра должна быть, второй аргумент - вместо какой картинки что подставлять. Для этого использовать конструкцию вида
    ris.src = dig0.src (для цифры 0).

В качестве значения аргумента ris должно передаваться соответствующее значение атрибута name из команды <IMG>.

Картинки:

                   
dg0.gif dg1.gif dg2.gif dg3.gif dg4.gif dg5.gif dg6.gif dg7.gif dg8.gif dg9.gif

 

       
dgam.gif dgpm.gif dgc.gif dgp.gif

. Сохранить файл как lab13.txt в блокноте и как lab13.html для просмотра в браузере.

 


Понравилась статья? Добавь ее в закладку (CTRL+D) и не забудь поделиться с друзьями:  



double arrow
Сейчас читают про: