Я все еще очень новичок в технологии, так что Если я сделаю что -нибудь не так, пожалуйста, поправьте меня и поделюсь ресурсами, которые могут помочь мне улучшить.
Я решил поработать над побочным проектом, который помог мне пересмотреть один из семинаров с прошлой недели моего Bootcamp, который был сосредоточен на рендеринге DOM с использованием компонентов и модуляризации.
- JavaScript
- CSS
- HTML
- GitHub
- NetLify
Я начал создавать то, как я хотел, чтобы мой секундомер выглядел на Фигма Я создал следующий каркас/дизайн.
После создания того, чего я стремился достичь, я начал с создания основного шаблона:
- index.html
- date.js (что я переименовал в Spectwatch.js)
- SPUTWATCH.CSS
- CreateElement.js
Я создал Главный контентер , Заголовок и Таймер-контентер разделы. Я иногда называю секундомер как таймер.
Stop Timer
Затем я создал функцию Create Element и назвал ее h для HTML.
Вы можете увидеть, как это делается в следующем семинаре:
https://github.com/oliverjam/learn-dom-rendering
После создания функции h () я затем приступил к визуализации элементов в SPUTWATCH.JS на DOM, используя функцию H () и добавив ее к Timer-Container Div.
Я использовал экспортный по умолчанию, чтобы экспортировать функцию h () в Spectwatch.js. Не забудьте дать тип сценария тип, который равняется модулю ( type = module ), чтобы JavaScript знал, что вы создаете и используете модули для подключения кода.
Я понимаю, что может выглядеть так, как будто я выбрал более длительный путь, чтобы создать вещи, но, пожалуйста, примите во внимание, что я пытаюсь реализовать работу, преподаваемую в семинаре, связанной выше.
Затем я создал Spectwatch () функция в SPUTWATCH.JS Я импортировал функцию h () из CreateElement.js на линии 3. Затем я создал переменные, держащие отдельные элементы, а затем сделал эти элементы детей с Timercontainer (строка 23) переменная и Внесение его, добавив его к таймеру-контентеру, который мне потребовался, используя Queryselector на линии 6.
После того, как я сделал эти элементы, мой секундомер выглядел так:
Доступность и расстояние
Я использую границы, чтобы понять свое расстояние, чтобы я мог визуально определить, где и как далеко простирается контейнер. Я также слегка изменил цвет зеленого с #6D884D ⇒ #6D9B4D, чтобы сделать сайт более доступным, потому что Lighthouse отметил контраст. Вы можете получить доступ к Lighthouse в инструментах Chrome Dev, и он дает вам отчет о том, насколько «доступен ваш сайт». Вы также можете изменить контраст в Dev Tools в разделе Styles, пока цвета не станут достаточным контрастом. Осмотрите ⇒ Элементы ⇒ Стили ⇒ * Нажмите на элемент, который вы хотите проверить, и изменить цвет, пока не скажет, что соотношение контрастности верно *
Источник изображения Затем я полностью забыл о кнопках, поэтому вернулся, чтобы создать и отображать как кнопки, так и заголовок для страницы.
После создания кнопок и заголовка, мой секундомер выглядел следующим образом: Так что теперь мое приложение было красивым, но не функциональным. Моим следующим шагом было создать функцию, которая альтернативна, я использовал это Учебник на YouTube для руководства.
Перед созданием функций, которые нам нужны, нам нужно создавать переменные в течение секунд, минут и часов (SEC, MIN, HR) и установить их на ноль (это переменные, которые будут увеличивать каждую секунду, минуту или час).
Я начал с создания функции, которая позволила бы мне увеличить секунды, минуты и часы. Условия операторов IF в течение секунд и минут заключались в том, что если это было менее 59, то увеличивает указанный счетчик, но если более то, это было бы установлено 0, в то время как более высокое количество времени увеличивалось.
Так что, если бы это было 59 секунд (00:00:59), тогда это было бы через 1 минуту, а счетчик секунд вернется к 0, в то время как мин увеличится + 1 (00:01:00). Условием часа было то, что если это было менее 24, то увеличение, но часы превышают 24 часа, то он должен сбросить до 0.
В блоках кода для операторов IF были выбраны «00», а их текстовое содержимое изменено с помощью функции печати.
Функция печати принимает значение (val) в качестве аргумента. Он имеет оператор IF с условием, что если значение меньше или равно 9, что функция должна вернуть «0″ + указанное значение. Так что, если значение есть. 3 секунды, затем Print () вернется “03”.
Для функций запуска и паузы кнопка начала была выбрана с помощью getElementbyId () и кнопка была либо отключена для начала (для предотвращения повторяющихся кликов), либо активной, когда секундомер был приостановлен, чтобы вы могли перезапустить.
Начинать()
В начальной функции интервал был установлен на 1000 мс, потому что. Мне было любопытно, как setInterval () на самом деле работает, Ну, мне в основном было любопытно, что сделало в сфере. Ответ? это во имя;) SetInterval принимает функцию обратного вызова в качестве аргумента и запускает эту функцию после установленного интервала. Так что, если вы введете 1000 мс, он будет выполнять эту функцию каждую секунду. В нашем случае мы хотим, чтобы установленные временные переменные увеличивались, и эти значения были напечатаны на наши элементы «00».
Функция pause ()
В функции PAUSE () мы очищаем интервал, используя clearInterval () с переменной setInterval t как аргумент.
Функция сброса ()
В функции сброса мы также очищаем интервал и сбрасываем временные переменные (Sec, Min, HR) на 0 и заменяем текстовое содержание элементов H2 «00».
После завершения этих функций все, что мне нужно было сделать, это выбрать кнопки из DOM (я использовал QuerySelector () ) и создать слушатели “Click” с функциями start (), pause () и reset () в качестве аргументов Анкет
После исправления ошибок программиста у меня был рабочий секундомер, который был красивым и функциональным.
Нажмите здесь, чтобы просмотреть мой секундомер.
Я что -нибудь пропустил, пожалуйста, дайте мне знать. Вы можете просмотреть мой исходный код Здесь Анкет
Мой твиттер
Оригинал: “https://dev.to/ephieo/beginners-attempt-at-creating-a-javascript-stopwatch-4kg6”