Как сделать таймер на creative
Те, кто занимается спортом, знают: часто нужен таймер. Кому-то надо отмерять интервалы по минуте, кому-то — сколько работаешь, столько отдыхаешь; кому-то нужны сложные интервалы и круги; кому-то просто секундомер. На всё это, конечно, в интернете полно готовых программ, но почему бы не сделать свою?
Если вы пропустили наш первый урок по созданию полноценных программ, где мы рассказываем про инструменты и основные моменты, прочитайте его сейчас. Без этого вам будет сложнее разобраться, что здесь происходит, и что это всё вообще такое.
Как устроен интервальный таймер
Наш сценарий работы такой: пользователь задаёт время одного упражнения и перерыва после него, а потом указывает, сколько раз он хочет выполнить это упражнение с перерывом. Например, стоять в планке на протяжении минуты, потом отдыхать 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
Голубой Петушок
Сто раз, везде, кругом, на стенах, на гаражах, в метро, на заброшках, везде уже написано что в 20 тиков = 1 секунда. 1 секунда = 1000 мс. Значит, 20\1000 => 0.02 тика = 1 мс. Создаешь флоат, задаешь ему значение (float)world.getWorldTime(); .
После чего пишешь свою систему миллитиков, в которой 1 мс = 2 мтика и подгоняешь как тебе надо короче дальше думать мне лень думай сам
Делаю воксельные(и не только) 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 секунд рывок хода выполнения должен увеличиваться с левой стороны экрана, а затем останавливаться.
Читайте также: