Сегодня в этом блоге вы узнаете, как создать цифровые рабочие часы с помощью Javascript. JavaScript получает данные с вашего устройства в режиме реального времени и отображает их на веб-странице. И этот пост о том, как JavaScript получает время и отображает некоторые основные способы. Как вы можете видеть на изображении, есть цифровые часы реального времени, что означает, что вы можете видеть время в цифрах с часами, минутами и секундами.
И часы работают нормально, вам не нужно обновлять веб-страницу, чтобы увидеть обновленное время. Есть только время в цифровом формате и индикатор am pm. Если вам трудно понять, что я говорю. Вы можете посмотреть полный видеоурок по этой программе (Digital Clock).
Пример:
Как вы можете видеть, это работающие в реальном времени цифровые часы с индикаторами «Am» и «PM». Я надеюсь, что это видео поможет новичку понять код работающих цифровых часов.
Вы можете использовать его на своих сайтах и проектах после нескольких изменений кода в соответствии с вашими требованиями. И я верю, что вы сможете вывести эти цифровые часы на новый уровень благодаря своему творчеству. Если вам нравится эта программа (Цифровые часы) и вы хотите получить исходные коды этой программы. Вы можете легко получить его по ссылке для скачивания, которая приведена ниже.
Работающие цифровые часы с использованием Javascript [Исходные коды]
Чтобы создать эту программу (цифровые часы). Во-первых, вам нужно создать два файла: один файл HTML, а другой — файл CSS. После создания этих файлов просто вставьте следующие коды в свой файл. Сначала создайте файл HTML с именем index.html и вставьте данные коды в свой файл HTML. Помните, что вы должны создать файл с расширением .html.
HTML КОД:
<!DOCTYPE html>
<html lang="en" dir="ltr">
<head>
<meta charset="utf-8">
<!-- Somehow I got an error, so I comment the title, just uncomment to show -->
<!-- <title>Digital Clock Javascript | CodingNepal</title> -->
<link rel="stylesheet" href="style.css">
</head>
<body>
<div class="clock">
<div class="display">
</div>
</div>
<script>
setInterval(function(){
const clock = document.querySelector(".display");
let time = new Date();
let sec = time.getSeconds();
let min = time.getMinutes();
let hr = time.getHours();
let day = 'AM';
if(hr > 12){
day = 'PM';
hr = hr - 12;
}
if(hr == 0){
hr = 12;
}
if(sec < 10){
sec = '0' + sec;
}
if(min < 10){
min = '0' + min;
}
if(hr < 10){
hr = '0' + hr;
}
clock.textContent = hr + ':' + min + ':' + sec + " " + day;
});
</script>
</body>
</html>
Создайте файл CSS с именем style.css и вставьте данные коды в свой файл CSS. Помните, что вы должны создать файл с расширением .css.
CSS КОД:
@import url('https://fonts.googleapis.com/css2?family=Orbitron:wght@400&display=swap');
*{
margin: 0;
padding: 0;
box-sizing: border-box;
}
html,body{
height: 100%;
}
body{
display: grid;
place-items: center;
background: #131419;
}
.clock{
background: #131419;
height: 120px;
line-height: 120px;
text-align: center;
padding: 0 30px;
box-shadow: -3px -3px 7px rgba(255,255,255,0.05),
3px 3px 5px rgba(0,0,0,0.5);
}
.clock .display{
font-size: 60px;
color: cyan;
letter-spacing: 5px;
font-family: 'Orbitron', sans-serif;
}
JAVASCRIPT КОД:
<script>
setInterval(function(){
const clock = document.querySelector(".display");
let time = new Date();
let sec = time.getSeconds();
let min = time.getMinutes();
let hr = time.getHours();
let day = 'AM';
if(hr > 12){
day = 'PM';
hr = hr - 12;
}
if(hr == 0){
hr = 12;
}
if(sec < 10){
sec = '0' + sec;
}
if(min < 10){
min = '0' + min;
}
if(hr < 10){
hr = '0' + hr;
}
clock.textContent = hr + ':' + min + ':' + sec + " " + day;
});
</script>
Вот и все, теперь вы успешно создали цифровые часы, используя HTML CSS и JavaScript. Если ваш код не работает или вы столкнулись с какой-либо ошибкой/проблемой, прокомментируйте или свяжитесь с нами со страницы контактов.