Как сделать таймер на creative

Добавил пользователь Alex
Обновлено: 04.10.2024

Те, кто занимается спортом, знают: часто нужен таймер. Кому-то надо отмерять интервалы по минуте, кому-то — сколько работаешь, столько отдыхаешь; кому-то нужны сложные интервалы и круги; кому-то просто секундомер. На всё это, конечно, в интернете полно готовых программ, но почему бы не сделать свою?

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

Как устроен интервальный таймер

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

Чтобы во время тренировки можно было не смотреть на экран, надо предусмотреть звуковое оповещение. Оно подскажет, что закончился очередной интервал, и нужно отдохнуть или снова приступить к упражнению.

Основа страницы

Возьмём стандартный шаблон страницы:

Теперь поработаем со служебным разделом .. и наполним его нужными командами:

Подключаем там же фреймворк jQuery, который упростит нам работу с таймером и его компонентами:

Теперь разместим все элементы интерфейса на странице. Начнём с общего блока, где будет наш таймер:

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

Звук мы взяли где-то из интернета и положили в ту же папку, что и наша программа.

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

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

Тег — это контейнер, как бы прозрачная обёртка для своего содержимого. С его помощью мы можем отдельно настроить внешний вид и поведение нашего текста. Теперь у нашего заголовка есть внутреннее имя "Secret" и класс "timer_types_btn" , который пока ещё нигде не прописан.

Интерфейс

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

Первое, что мы в него добавим — интерфейс настроек тренировки, где можно будет выбрать время и количество повторений. Сначала добавим в него настройку времени на упражнения:

Внутри этого блока у нас три раздела: один отвечает за минуты, второй — за двоеточие, третий — за секунды. Свойство contenteditable="true" означает, что этот контент можно изменять, щёлкая мышкой и вводя свои значения.

Так же добавим блоки количества подходов и времени отдыха:

Вставляем это всё в нашу панель настроек и смотрим, что получилось:

Табло для отсчёта времени и кнопки

Для большого табло используем тот же код, что и для панели настроек, только применим потом другой класс оформления:

Кнопки сделаем с помощью стандартного тега . Каждой кнопке присвоим своё имя и идентификатор, чтобы можно было с ними работать из скрипта:

Вот наш интерфейс. Ставим его в форму на странице и смотрим на результат:

Настраиваем внешний вид

Очевидно, что таймер наш выглядит скромновато. Нужно его оформить. Для этого используем CSS — стили оформления элементов на странице.

Как вы помните, CSS-стили можно выносить в отдельный файл, а можно писать в разделе с помощью тега

Смотрите, у нас появилась новая команда в теге скрипта: defer . Она запрещает скрипту выполняться, пока страница полностью не загрузится. Это позволяет нам сначала подготовить страницу целиком, а только потом запускать таймер.

Мы назвали наш скрипт interval_timer_script.js , но название у него может быть каким угодно, лишь бы из английских букв, цифр и без пробелов. Расширение .js должно остаться таким же в любом случае. Меняете имя файла — не забудьте прописать его название в src="https://thecode.media/timer/%E2%80%A6.js" , чтобы страница знала, как называется нужный скрипт.

Теперь наполним наш скрипт. Начнём с переменных:

Теперь напишем функцию, которая будет постоянно готовить к запуску наше звуковое оповещение. Она будет брать нужные нам файлы ogg и mp3 и подключать их к нашей странице:

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

Ну и добавим эстетики в программу — для красоты будем ставить первым ноль, если число минут или секунд меньше девяти:

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

Теперь предусмотрим смену времени каждую секунду, пока работает таймер. Для этого будем отдельно обрабатывать два режима: тренировки и отдыха. Не забудем про красоту — время тренировки сделаем зелёным, как на панели настроек, а время отдыха — красным:

Продолжение скрипта: обрабатываем нажатия на кнопки

Если у вас не получилось всё правильно собрать в один файл и запустить — ничего страшного. Мы сами уже сделали это за вас и упаковали все нужные файлы в один архив. Вам нужно его скачать, распаковать и запустить файл int.html.

Аким Бырков

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

Аким, Первый выполнен, не помогло. Просто поставил событие "таймер". Пробовал поставить таймер в событие

Аким Бырков ответил Дане

Аким, Блин. ты не понял о чем я(((( Я вообще о другом. Трудно объяснить =( В общем так:нужно, чтобы после того как произошло событие,каждые 2 секунды спавнился объект. вот

Женя Людчик ответила Акиму

Аким, хахаах бля, чувак, сам говоришь делать таймер через каунтер и при этом примемняешь каунтер :D ОРУУУ

Женя Людчик ответила Дане

Данила, карочи, вот у тебя есть таймер, и с этим таймером есть к примеру Alterable value = 1. Так вот, когда этот Alterable value будет 1, то заработает твой таймер

Аким Бырков ответил Жене

Сто раз, везде, кругом, на стенах, на гаражах, в метро, на заброшках, везде уже написано что в 20 тиков = 1 секунда. 1 секунда = 1000 мс. Значит, 20\1000 => 0.02 тика = 1 мс. Создаешь флоат, задаешь ему значение (float)world.getWorldTime(); .
После чего пишешь свою систему миллитиков, в которой 1 мс = 2 мтика и подгоняешь как тебе надо короче дальше думать мне лень думай сам

teramik

Maxik

Голубой Петушок

Делаю воксельные(и не только) 3D-модели для ваших Minecraft проектов. Портфолио можете увидеть полистав группу моего мода Soviet Lab - все модели сделаны мной.

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

Если вам нужно узнать, как долго вы говорите, чтобы не прерывистеть отведенное время, см. запуск презентации и просмотр заметок в режиме presenter.

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

Создание таймера

Для этого таймера используется простая, но эффектная анимация. Отсчет ведется от 5 до 1 с интервалом в одну секунду.

Для начала создайте пять надписей с цифрами от 5 до 1. При отсчете они будут по очереди исчезать с интервалом в одну секунду.

Совет: Лучше создавать надписи последовательно: от больших цифр к меньшим. Так будет легче применить анимацию в правильном порядке.

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

Щелкните внутри прямоугольника с номером.

На вкладке Анимация в группе Дополнительные анимации нажмите кнопку Добавить анимацию иперейдите к кнопке Выход. Здесь можно выбрать необходимый эффект анимации, например, Исчезновение.

Выбирайте прямоугольники с цифрами 4, 3, 2 и 1, а затем также применяйте к ним эффект Исчезновение.

Щелкните Анимация> области анимации, чтобы отдемонстрировать ее. Обратите внимание, что надписи будут пронумерованы с учетом других объектов на слайде. Ориентируйтесь по самой правой цифре, соответствующей тексту в поле.

Щелчком мыши должна запускаться анимация только для надписи с цифрой 5, которая будет отображаться на экране одну секунду. Другие надписи также должны автоматически исчезать через секунду в заданном порядке.

Выберите Прямоугольник 5и в группе Анимация > Время) оставьте параметры Начать: По щелчку и длительности: 0,01, но значение Задержка — 01,00, одна секунда.

Теперь в области анимации последовательно выбирайте остальные надписи с цифрами от 4 до 1. В группе Время показа слайдов устанавливайте следующие параметры: Начало — "После предыдущего", Длительность — "Авто", Задержка — "01,00".

Когда все будет готово, попробуйте сделать это, переходить в режим слайд-шоу и играть с текущего слайда. Щелкните, чтобы начать обратный отсчет!

Эффекты анимации можно просмотреть в любое время. На вкладке Анимация в группе Просмотр нажмите кнопку Просмотр.

После обратного отсчета может потребоваться добавить анимацию, например текстовое поле Готово! Для этого вставьте текстовое поле, выберите его, перейдите к вкладке Анимация > Дополнительные эффекты анимации >появления > появления. Затем в группе Время начала установите значение После предыдущего, установите для длительности значение Авто иустановите значение Задержка 00,00. Обратите внимание, что эта надпись также появилась в области анимации.

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

Создание индикатора прогресса

Другой эффективный способ задействовать таймер отсчета — добавить в презентацию индикатор прогресса.

На вкладке Вставка в группе Иллюстрации нажмите кнопку Фигурыи выберите прямоугольник.

Щелкните слайд у левого края, а затем нарисуйте прямоугольник.

Вы можете изменить цвет индикатора прогресса на любой другой. Щелкните его правой кнопкой мыши и выберите формат > Параметры фигуры > заливка >Сплошная заливка.

На вкладке Анимация в группе Анимация выберите Вылет.

В группе Время показа слайдов задайте Длительность движения индикатора прогресса, например 30 секунд. В области Начнитевыберите по щелчку.

На рисунке ниже показано, как должны быть настроены все параметры.

Когда все будет готово, попробуйте сделать это, переходить в режим слайд-шоу и играть с текущего слайда. Щелкните, чтобы начать работу с временем. В течение 30 секунд рывок хода выполнения должен увеличиваться с левой стороны экрана, а затем останавливаться.

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