В этом уроке мы с вами сделаем небольшую программу, которая будет просто отображать сколько сейчас время. Создаем html-файл с именем watch. Добавляем стартовые теги. Внутри тега боди будет только тег абзаца.
Теперь переходим к CSS.
Фон у тега боди будет черный. Далее набираем стили для тега абзаца. Ширина тега будет 6em, размер шрифта 4em, Шрифт будет Orbitron. Давайте кстати установим этот шрифт. Расстояние между буквами установим в 0.1em, цвет будет такой. Далее я хочу расположить тег абзаца по центру как по горизонтали, так и по вертикали. Это мы сделаем с помощью абсолютного позиционирования. Свойство топ будет 50%, и лефт тоже. Теперь тег абзаца располагается здесь, что нас не совсем устраивает. Испарим мы это с помощью трансформ. Сдвинем тег абзаца на 50 процентов влево и вверх. И поставим поля по нулям. Готово. Но сейчас мы текста внутри тега абзаца не увидим, так как его еще нет.
Переходим к тегу script. Расположим его перед закрывающим тегом боди, чтобы скрипт начал выполняться после загрузки html и css.
В начале создадим функцию showTime(), параметров у нее не будет.
Первым делом нам надо создать объект в котором будут храниться данные о текущем времени. Это можно сделать с помощью объекта-класса Date. Как вы могли заметить, в отличие от window, и document, у нас нет заранее заготовленного объекта date. Дело в том, что он не часто нужен в программах, поэтому заранее транслятором он не создается. Мы его создадим сами. В значении сперва пишем ключевое слово new, тем самым мы собираемся вызвать функцию-конструктор класса Date, и пишем соответственно Date, параметры будут пустые.
Теперь в переменной date будут храниться часы, минуты и секунды, которые нам нужны для отображения на экране. Далее напишем переменныe hours, minutes, seconds, где будет храниться текущий час, текущая минута и секунда. Добавить текущий час можно с помощью метода date который называется getHours. Текущий час данный метод возвращает в виде числа. Далее присваиваем следующим переменным минуты и секунды с помощью методов getMinutes и getSeconds.
В конце напишем переменную time, в которой будет весь текст с двоеточиями между часами минутами и секундами, и его мы поместим в тег абзаца.
Далее нам, как и в программе секундомер, необходимо сделать так, если, например, значение секунд меньше 10, то необходимо писать 0 впереди. В прошлый раз мы это делали с помощью условного оператора if, но у if есть сокращенная версия, и называется он тернарный оператор. Как вы помните есть унарные операторы, бинарные, операторы присваивания и т.д. и теперь вы знаете еще об одном виде операторов – это тернарный оператор и существует в единственном числе. Т.е. например операторов присваивания достаточно много, а вот тернарный оператор всего лишь один и схематически он выглядит так:
условие ? действие если true : действие если false
Давайте применим его для первой переменной:
В условии пишем если hours меньше 10. Скобки здесь указывать не обязательно, они нужны, если мы применяем более сложные условия с логическими операторами И или Или. Далее ставим вопросительный знак, пишем действие если условие вернет true, это будет 0+значение переменной hours. Т.е. это выражение, если hours, например, равна 7, вернет 07. Далее ставим двоеточие, и пишем действие если условие вернет false, то мы просто вернем значение переменной hours.
Делаем тоже самое и с остальными переменными:
Далее присвоим переменной time необходимый текст:
И добавим этот текст в тег абзаца с помощью объекта document и его метода QuerySelector, который используется для поиска и получения первого элемента в документе, который соответствует указанному CSS-селектору. У нас это будет тег p. В нашем HTML документа он единственный, так что данный метод сработает верно. Также мы могли использовать метод getElementsByTagName, но так как данный метод возвращает DOM элементы в виде массива, нам еще надо указать его позицию в массиве, даже если он единственный тег в документа.
Функция готова, теперь, давайте её будем вызывать каждые пол секунды. Можно, каждую секунду, но я заметил, что на слабых компьютерах, выполнение функции может слегка запаздывать, и время будет иногда перескакивать на секунду.
Итак будем запускать функцию, уже через знакомую нам функцию setInterval.
Проверяем. Готово.
Домашнее задание. Нужно будет переделать наши часы, чтобы они просто показывали количество секунд прошедших за сегодняшний день