Разработка часов реального времени для всех ваших веб-приложений с использованием JavaScript
В этом уроке я расскажу о создании часов реального времени для веб-приложений. В основном это разработано с использованием HTML, CSS и JavaScript. Поэтому, даже если вы новичок в веб-разработке, это не будет вам сложно понять и добавить эти часы для своих веб-приложений в будущем.
Я буду обсуждать каждый шаг с примером, чтобы вы могли продолжить со мной и создать хорошие часы реального времени в конце этого урока. Прежде чем приступить к написанию кода, обязательно выберите текстовый редактор, совместимый с файлами конфигурации HTML, CSS и JavaScript.
Я предпочитаю VS Code, и вы можете выбрать любой редактор кода соответственно [если вы хотите загрузить VS Code, щелкните ссылку ниже и установите его на свой компьютер].
Давайте сначала создадим файл index.html. Это базовый файл конфигурации, который содержит все основные теги HTML. Я использовал тег ‹div›, чтобы поместить свои часы, чтобы я мог переместить их в другое место позже, если это необходимо. Вот мой index.html.
Затем вы можете добавить файл styles.css и поместить в него все свои стили. Когда вы закончите с этим, вы можете добавить его в файл index.html как приведенный выше фрагмент кода. В этом уроке я использовал базовый стиль, так как мне нужно было разместить часы в верхнем правом углу моей веб-страницы, и я предпочел использовать синий цвет. Вот мой styles.css.
.topcorner{
position:absolute;
top:10;
right:10;
color: blue;
}
Вы можете добавить любые дополнительные стили к своим часам с помощью этого файла и не стесняйтесь использовать его и настраивать для лучшего просмотра на своей веб-странице.
Далее мы переходим к разработке часов реального времени. Для этого мы можем использовать объект Date в JavaScript. Используя конструктор new Date(), мы можем создать новый объект даты с текущими датой и временем. Давайте создадим его внутри функции JS, как показано ниже.
function showTime(){
var d = new Date();
}
setInterval(showTime,1000);
Нам также нужен метод JavaScript setInterval(), настроенный на 1 секунду для вызова функции showTime каждую секунду. Таким образом, часы будут обновляться каждую секунду, и мы сможем видеть, как наши часы продолжают тикать. Чтобы иметь больше деталей, таких как год, месяц, дата, день, а также часы, минуты и секунды в наших часах, мы можем обновить функцию, как показано ниже.
function showTime(){
var d = new Date();
var year = d.getFullYear();
var month = d.getMonth();
var date = d.getDate();
var day =d.getDay();
var hour = d.getHours();
var min = d.getMinutes();
var sec = d.getSeconds();
}
setInterval(showTime,1000);
Приведенный выше код даст полную дату со временем, и он продолжает тикать из-за метода setInterval(). В этот момент, если вы поместите console.log(), вы увидите числовой вывод, такой как числовое значение 1 для января и 2 для февраля и снова 1 для понедельника и 2 для вторника и так далее. Кроме того, вы получите текущее время в 24-часовом формате.
Поэтому следующей задачей будет настройка этого вывода на более удобный вид.
Давайте изменим числовое значение месяца на строку, чтобы вы получили то, что видите в своем календаре. Оператор JavaScript Switch является наиболее удобным для этой задачи, и его можно настроить, как показано ниже.
switch(month){
case 1:
month="January";
break;
case 2:
month="February";
break;
case 3:
month="March";
break;
case 4:
month="April";
break;
case 5:
month="May"
break;
case 6:
month="June"
break;
case 7:
month="July"
break;
case 8:
month="August"
break;
case 9:
month="September"
break;
case 10:
month="October"
break;
case 11:
month="November"
break;
case 12:
month="December"
break;
default:
}
Давайте еще раз воспользуемся оператором Switch, чтобы преобразовать дату в строковое значение.
switch(day){
case 1:
day="Monday";
break;
case 2:
day="Tuesday";
break;
case 3:
day="Wednesday";
break;
case 4:
day="Thursday";
break;
case 5:
day="Friday";
break;
case 6:
day="Saturday";
break;
case 7:
day="Sunday";
break;
default:
}
Теперь вы получаете месяц и дату в строковом формате. Вы можете проверить это, запустив console.log() в своем коде. Затем я подумал, что часы должны быть в 12-часовом формате вместо стандартного 24-часового формата [В основном вы получаете время в 24 -hour при использовании нового объекта Date()].
Я использовал простой оператор IF, чтобы получить время в 12-часовом формате со строками AM и PM в конце. заявление. Ниже вы можете найти код, который я использовал для этого преобразования.
var MV = "AM";
if(hour == 12){
MV = "PM";
}
if(hour > 12){
hour = hour % 12;
MV = "PM";
}
Теперь все готово, чтобы открыть часы в браузере. Давайте откроем его с помощью метода DOM getElementById(). Давайте настроим его, как показано ниже, и как только вы закончите с этим, откройте файл index.html в браузере.
document.getElementById("clock").innerHTML = "<b>Today is:</b> "+day+" "+date+"th "+month+" "+year+", "+hour+":"+min+":"+sec+" "+MV;
Теперь вы получите полные часы с текущей датой и временем, которые продолжают идти внутри вашего приложения.
Давайте внесем небольшое изменение, и это добавит "0"в началедля часов, минут и секунд в ваших часах, когда у вас есть только одна цифра для каждого раздела.
hour = ("0" + hour).slice(-2);
min = ("0" + min).slice(-2);
sec = ("0" + sec).slice(-2);
Обязательно добавьте эту часть в конец функции showTime(), и она проверит каждый раздел и добавит "0", где это необходимо.
Вы можете найти полный код JavaScript здесь.
Заключение
Поздравляем 🎉
Вы успешно разработали часы реального времени и можете добавить их в свои веб-приложения [исходный код этого проекта можно найти по ссылке ниже].
Исходный код: GitHub
Спасибо за прочтение!
Больше контента на plainenglish.io. Подпишитесь на нашу бесплатную еженедельную рассылку здесь.
