Как сделать секундомер

Обновлено: 04.07.2024

В этом уроке для начинающих мы покажем как сделать секундомер на основе платы Arduino Uno и ЖК-дисплея своими руками.

Шаг 1: Что нам понадобится

Для создания нашего секундомера нам понадобятся следующие комплектующие:

1x Arduino Uno
1x Модуль ЖК-дисплея, как вариант - SainSmart 1602 LCD Shield Module Display V3 for Arduino UNO R3 MEGA2560 Nano DUE
1x USB A-B кабель

Дополнительно можно купить магнит для размещения устройства на какой-либо металлической поверхности.

Шаг 2. Размещаем ЖК-дисплей на Arduino

Этот шаг очень простой, мы всего лишь должны присоединить модуль ЖК-дисплея к Arduino Uno.

Шаг 3: Код для Ардуино

Загрузите с помощью ПК на Ардуино код, который представлен ниже. Более подробную инструкцию по работе с программным обеспечением можно посмотреть а нашем материале "Класс Arduino Nano", где мы подробно прошли по всем шагам работы с микроконтроллерам Ардуино.

Шаг 4: Запустите свой секундомер

На этом всё - наш секундомер на основе Ардуино готов. Осталось только его запустить.

Привет, Хабраюзер!
Я даже не знаю что хуже, что код для этого секундомера занимает ~ 1100 строк, или то что он работает только в половине браузеров.
Но если же тебе интересно как это работает, прошу под кат.

Вступление

Во-первых о браузерах. Работает этот код, из нынешних: в FireFox, Safari и Chrome. На подходе такие ~~гиганты~~ браузеры как IE10 и супер секретная новая Opera.
Во-вторых, хочу сразу отметить, что я буду описывать именно процесс анимации, а не рисования на CSS3. На будущее план как раз наоборот сделать очень красивый рисунок, на CSS. O да, это стало не так нудно, после того как разработчики из сафари отказались от своего старого стандарта linear-gradient'a (прощай color-stop, from, to, 0 0) и Opera наконец-то стала поддерживать radial-gradient (последнее произошло относительно давно).

Сначала я подумал что сделаю всем привычный секундомер, со стрелочками и только, но это очень скучно.
Нет того драйва, и ощущения механизма, когда ты лицезришь две стрелочки, бегающие по монитору. С другой же стороны я сразу вспомнил, как когда-то делал что-то вроде одометра, для пройденного мышкой пути. И меня осенило.

Понеслась

Ставим у родителя overflow: hidden и вуаля! Все, одометр готов.

Анимация

Приступим же к анимации, тут все просто:

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

Все расписывать не буду, смысла в этом нет. Суть в том что мы берем 1% от 10-ти секунд, как время отведенное для перелистывания счетчика.
Поэтому для десятых — 0% 9.9% 10% 19.9% и так далее. Дальше больше, сотые — 0% 9.99%, тысячные — 0% 9.999%.

Заработало!

Теперь самое вкусное, как без JS заставить все это двигаться? Как нам имитировать onclick?
Есть несколько приемов, которые отвечают нашим требованиям.
Первый, самый старый и простой — псевдоклассы для ссылки
Я имею ввиду :active, :focus. Но это скучно, да и к тому же багнуто работает в Chrome (Что?! Может быть в IE?! Нет именно в Chrome)

Второй более веселый способ, использовать radio и checkbox.
И его псевдоелемент :cheked. Этот способ я вычеркнул, потому что нужен будет лишний элемент label для каждого

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

Это не все способы которым можно прибегнуть, но когда я остановился на :target больше думать и не хотелось.

Тут даже обьяснять ничего не надо.
И теперь CSS:

Мы ставим в качестве имени анимации те имена кеифреймов, которые давали выше.
И все начинает работать. Для кнопки Пауза тоже ставим, это для того что бы анимация не обнулялась при нажатии на нее, но анимацию нужно остановить, для этого и предусмотрен animation-play-state

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

Ок, теперь сделаем часики. Именно стрелку, циферблат нам не интересен.
HTML

Дивы line просто обозначают вертикаль по которой мы ставим деления на минуты.
Arrow и есть наша стрелка.

Запускаем стрелку аналогично с одометром.
Приводить код думаю лишнее.

В общем, финальный результат, еще раз.
Спасибо за внимание, нового я по сути ничего не рассказал, лично я этой инфой владею уже давно.
Просто кому-нибудь это, возможно, будет полезно, или просто интересно.

В этой статье Вы научитесь создавать секундомер, используя HTML5 и CSS3. Мы рассмотрим CSS3 анимацию с тремя кнопками: старт, остановка и сброс. Запуск начинает работу секундомера, стоп – останавливает секундомер, и кнопка сброса сбрасывает секундомер.

Основная логика создания секундомера очень простая, Вы будете использовать простой контейнер div, содержащий цифры, они будут увеличиваться с помощью ключевого кадра анимации.

Сначала создайте div (содержащий числа) с помощью кода HTML:

title > Stopwatch title >

link rel ="stylesheet" href ="Style.css" />

div class ="number"> 0 1 2 3 4 5 6 7 8 9 div >

Вот результат предыдущего кода:

Теперь Вам нужно выровнять числа по вертикали за счет уменьшения ширины контейнера. Итак, создайте файл CSS (styles.css) и введите следующий код в этот CSS-файл.

Согласно предыдущему коду, Ваши цифры будут выровнены вертикально:

Теперь используем цифровые шрифты, Вы можете скачать их с сайта ds-digi.font. Используйте следующий код CSS, чтобы изменить шрифт:

font-family : digital , arial , verdana ;

Результат такого кода:

Давайте поместим числа в поле для отображения только одной цифры. Таким образом, в HTML-файле поместите div с цифрами в другой div. Код будет таким:

div class ="number"> 0 1 2 3 4 5 6 7 8 9 div >

Теперь примените такие настройки CSS, чтобы отображать только одну цифру.

font-family : digital , arial , verdana ;

Таким будет результат:

Давайте создадим анимацию цифр, так как это главная задача статьи. Логика анимации – изменить значение top position absolute от 0 до -400 px, потому что высота поля 40 px, а у нас есть цифры от 0 до 9, то есть в общей сложности 10 цифр, так что 40 * 10 = 400, Вы будете менять верхнюю от 0 до -400 px. Вот так выглядит код файла style.css:

font-family : digital , arial , verdana ;

-webkit-animation : moveup 1s steps(10, end) infinite ; /* Chrome, Safari, Opera */

Если вам нравится проводить презентации PowerPoint и вы ищете способ сделать их уникальными и особенными, то вы попали в нужное место. Мы объясним все, что вам нужно сделать, чтобы создать секундомер или анимированный счетчик в Microsoft PowerPoint .

Узнайте, как установить таймер обратного отсчета

Как вы можете видеть, продолжая читать, этот процесс очень прост, и поэтому вы используете Microsoft Office в Интернете или на вашем ПК, в любом случае это будет очень легко сделать.

Чтобы узнать, какой номер присвоен каждому объекту, просто посмотрите на номер справа от каждого объекта, который обозначает текст в каждом поле.

Заключительные этапы

Как вы увидите, этот простой процесс очень легко выполнить. Фактически, вы также можете попробовать вставить анимированный GIF в PowerPoint чтобы дать аналогичный эффект.

Шаги по созданию таймера индикатора выполнения

Мы подробно объясним все, что вам нужно знать, чтобы иметь возможность Creer быстро и легко таймер индикатора выполнения в PowerPoint. Для этого также может быть очень полезно скачать больше шаблонов в PowerPoint , чтобы иметь больше инструментов, которые помогут вам.

Мы закончили! Создание анимированных видеороликов в PowerPoint и другие типы анимации, как мы видели, очень просты. Если вы найдете эту информацию полезной, не забудьте поделиться ею с друзьями.

Читайте также: