Часть 1 — Таймер обратного отсчета

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

Для этого первого мы создадим таймер обратного отсчета, используя html, css и js, сосредоточившись в основном на Javascript. В этой серии статей предполагается, что вы достаточно знаете html и т. д., чтобы начать работу, и что вы настроены в своей среде. Я буду использовать VSCode.

Итак, сначала я создал папку с файлами html, css и js.

Начнем с нашей html-страницы…

здесь у нас есть основная html-страница. Все, что есть в теле, появится, когда вы откроете html-файл в браузере. Итак, давайте проверим это очень быстро. Я добавлю тег h1 и наберу небольшое сообщение, затем в своем терминале я смогу ввести open index.html и увидеть свою страницу в браузере.

Здорово! мы готовы к работе. Вы также можете заметить, что в заголовке есть тег заголовка, это то, что будет отображаться на вкладке вверху.

Теперь, чтобы иметь возможность стилизовать нашу страницу, давайте добавим ссылку на наш файл style.css, а также добавим ссылку на наш файл js.

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

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

и это будет выглядеть так…

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

Вот и все для нашего html-файла, теперь давайте добавим немного стиля на нашу страницу css.

Поскольку я хочу сосредоточиться на js, а не на css (для разнообразия), я вставлю свой css ниже…

@import url("https://fonts.googleapis.com/css2?family=Poppins:wght@200&display=swap");
* {
box-sizing: border-box;
}
body {
background-image: url(https://images.unsplash.com/photo-1556775351-fe97561f7b42?ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&ixlib=rb-1.2.1&auto=format&fit=crop&w=1500&q=80);
background-size: cover;
/* background-position: center center; */
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
min-height: 100vh;
font-family: "Poppins", sans-serif;
margin: 0;
}
h1 {
font-size: 4rem;
margin-top: -20rem;
}
.countdown-container {
display: flex;
flex-wrap: wrap;
align-items: center;
justify-content: center;
}
.big-text {
font-weight: bold;
font-size: 6rem;
line-height: 1;
margin: 1rem 2rem;
}
.countdown-el {
text-align: center;
}
.countdown-el span {
font-size: 1.5rem;
}

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

Таким образом, с приведенным выше кодом в нашем файле css и ссылкой в ​​нашем файле html мы должны увидеть следующее…

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

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

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

Теперь нам нужна наша функция обратного отсчета, также, когда я начал это, это было для новых лет, поэтому я вернусь к этому очень быстро, изменив свой тег h1, чтобы сказать новые годы… и изменив мою дату на 1 января 2022 года.

Хорошо, мы сейчас отсчитываем время до нового года.

Вернемся к нашей функции. мы устанавливаем наши newYearsDate и currentDate с помощью new Date(), а для даты нового года мы передаем нашу переменную newYears.

Далее нам нужно вычислить наше общее количество секунд с…

const totalSeconds = (newYearsDate - currentDate) / 1000;

Теперь давайте посчитаем наши дни, часы, минуты и секунды.

const days = Math.floor(totalSeconds / 3600 / 24);
const hours = Math.floor(totalSeconds / 3600) % 24;
const mins = Math.floor(totalSeconds / 60) % 60;
const seconds = Math.floor(totalSeconds) % 60;

поэтому мы делим totalSeconds на 3600, а затем на 24 дня, потому что в часе 3600 секунд, а в сутках 24 часа. Как видите, мы используем эту логику до конца, поэтому у нас есть таймеры. Внизу вы можете видеть, что мы установили наш интервал на 1000 миллисекунд или 1 секунду, который определяет наш интервал обратного отсчета, мы хотим отсчитывать каждую секунду.

Теперь нам нужно добавить oue js в наш html, взяв наши переменные сверху и добавив наши переменные js в наш innerHTML. Вы также можете видеть, что я добавил функцию, в которой нет необходимости, но, на мой взгляд, она выглядит лучше, и она добавляет ноль перед одиночными числами.

function formatTime(time) {
return time < 10 ? `0${time}` : time;
}

поэтому, если число меньше 10, добавьте ноль, а не просто оставьте его.

Вот и все, если мы хотим изменить дату, просто измените ее в переменной newYears в том же формате, и ваш счетчик изменится.

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