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

ПРАКТИЧЕСКАЯ РАБОТА №13


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

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


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

Требования к отчету:  Итоги  практической работы  представить в виде файла lab13.html на диске.

персональный компьютер.


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

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

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



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



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



Литература:



  1. Обработка событий.
  2. JavaScript в HTML документах.



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