Здравствуйте разработчики,

В этом сообщении блога вы научитесь создавать код 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.

Я был бы счастлив считать вас одной из постоянно растущих групп замечательных друзей в Интернете.

Спасибо.