Здравствуйте разработчики,
В этом сообщении блога вы научитесь создавать код IST с использованием ванильного JavaScript с нуля. Этот проект поможет вам узнать о set Interval и ванильном Javascript-подобном document.getElementId. Вы получаете время в стандартном времени Индии, а не по Гринвичу.
Давай начнем.
Предпосылка
Необходимы базовые знания о них:
HTML
CSS
JavaScript
мы назовем этот обратный отсчет, потому что это веб-страница для подсчета дат и времени до даты индуистского нового года.
Здание
шаг 1 — настройка проекта
создайте папку с именем countingDown. Внутри него создайте index.html и style.css, как создать счетчик IST с помощью ванильного JavaScript с нуля?
шаг 2 — HTML-код
Введите этот код в ваш Index. HTML
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Hindu New year</title> <link rel="stylesheet" href="./style.css"/> </head> <body> <div id="celebrate" class="counter"> <h3>Hindu new Year</h3> <hr/> <p id="counting"></p> </div> </body> </html>
Мы связали наш файл CSS, создали h3 для заголовка веб-страницы и горизонтальную линию для различения заголовка и счетчика. Тег p с идентификатором счетчика, в котором функция добавления счетчика использует JavaScript.
Шаг 3 — Код CSS:
Введите этот код в свой style.css
@import url('https://fonts.googleapis.com/css2?family=Noto+Sans&display=swap'); body{ color: #faf0ca; background-color: #0d3b66; font-family: Noto Sans; } .counter{ top: 50%; left:50%; position: absolute; transform: translate(-50%,-50%); text-align: center; } h3{ font-size: 32px; text-transform: uppercase; letter-spacing: 3px; } p{ font-size: 24px; letter-spacing: 6px; } @media screen and (max-width:420px) { h3{ font-size: 24px; letter-spacing: 1px; } p{ font-size: 18px; letter-spacing: 1px; } }
Код CSS установит стили для тела, h3, а также стилизует тег p. мы использовали семейство шрифтов Noto Sans для этого веб-сайта. Цвет фона — #0d3b66 (шестнадцатеричный код), а цвет означает, что цвет текста — #faf0ca.
Класс счетчика div используется для преобразования, которое всегда размещает дочерние элементы центра div.
h3 имеет размер шрифта 32 и расстояние между буквами 3 пикселя, а тег p имеет размер шрифта 24 пикселя и расстояние между буквами 6 пикселей.
Шаг 4 — JavaScript-код
Теперь добавим код JavaScript.
<script> var countDownDate = new Date ('March 22, 2023').getTime() var interval = setInterval(function (){ var GMT = new Date() var IST ; offset = IST var ISTtime = new Date(GMT.getTime() + offset) var gap = countDownDate - ISTtime var days = Math.floor(gap / (1000 * 60 * 60 * 24)); var hours = Math.floor((gap % (1000 * 60 * 60 * 24))/(1000 * 60* 60)); var minutes = Math.floor((gap % (1000 * 60 * 60 ))/(1000 * 60)); var seconds = Math.floor((gap % (1000 * 60 ))/1000 ); document.getElementById('counting').innerHTML = days + " d " + hours + ' h ' + minutes + ' m ' + seconds + " s " if (gap < 0){ clearInterval(interval); document.getElementById('counting').innerHTML = 'Expired' } },1000) </script>
Под тегом div создайте скрипт. Теперь мы создали переменную обратного отсчета, в которую получаем данные на 22 марта 2023 года со временем.
Теперь объявите функцию set Interval, используя переменную Interval. Внутри кода мы объявляем GMT и получаем дату с помощью new Date(). после того, как мы должны преобразовать GMT в IST.
теперь объявите переменную IST со значением 330 и смещением, которое кратно IST * 60 * 1000. Теперь мы можем получить дату и индийское стандартное время.
вычисляя дни, минуты, часы и секунды.
При размещении условия с использованием пробела меньше 0 вместо счетчика отображается значение expired.
если вам понравилась эта статья и вы хотите увидеть больше контента, связанного с Javascript и веб-разработкой, подписывайтесь на меня здесь, в Твиттере или на LinkedIn.
Я был бы счастлив считать вас одной из постоянно растущих групп замечательных друзей в Интернете.
Спасибо.