В этой статье мы узнаем, как сделать простые цифровые часы.
Предпосылки
- HTML
- CSS
- Основы JavaScript и немного DOM
HTML
Начнем с части HTML.
Итак, чтобы отобразить время, давайте создадим div и создадим четыре элемента span для отображения часов, минут, секунд и сеанса (AM или PM). Дайте каждому промежутку идентификатор, как показано в коде ниже.
<!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>Document</title>
<link rel="stylesheet" href="digital.css">
<script src="digital.js"></script>
</head>
<body>
<div class="container">
<span id="hours">00</span>
<span>:</span>
<span id="minutes">00</span>
<span>:</span>
<span id="seconds">00</span>
<span id="session"></span>
</div>
</body>
</html>
Вот как это будет выглядеть.
CSS
Давайте придадим ему стиль с помощью CSS.
*{
margin: 0;
border: 0;
box-sizing: border-box;
}
body{
overflow: hidden;
background-color: antiquewhite;
}
.container{
color: blue;
position: absolute;
font-weight: bold;
top: 50%;
left: 50%;
transform: translate(-50%,-50%);
font-size: 6rem;
display: flex;
flex-direction: row;
justify-content: space-around;
}
span{
padding: 1.2rem;
}
Вот как это будет выглядеть.
JavaScript
Теперь давайте заставим часы работать с базовым JavaScript.
Давайте сначала определим функцию, назовем ее displayTime(). Внутри функции мы получим текущую дату и время, используя объект «new Date()», который назначается переменной с именем dateTime.
Теперь давайте получим часы, минуты и секунды из объекта Date, используя «dateTime.getHours()» для текущего часа, «dateTime.getMinutes()» для текущей минуты и «dateTime.getSeconds()» для получения секунд. .
function displayTime(){
var dateTime = new Date();
var hrs = dateTime.getHours();
var min = dateTime.getMinutes();
var seconds = dateTime.getSeconds();
}
Теперь давайте объявим переменную с именем «session», значением по умолчанию которой является «AM».
Также с помощью оператора if-else мы установим сеанс «AM» или «PM» в зависимости от времени. Если часы больше или равны 12 , это AM, иначе PM. Если часы равны 0, мы установим 12.
var session = "AM";
if(hrs >= 12){
session = "PM";
if (hrs > 12) {
hrs = hrs - 12;
}
}
if(hrs == 0){
hrs = 12;
}
В приведенном ниже коде отображаются ведущие нули для минут и секунд, если они меньше 10.
if(min < 10) {
min = "0" + min;
}
if(seconds < 10) {
seconds = "0" + seconds;
}
Теперь внутри той же функции мы выберем элементы HTML, используя «document.getElementById», а затем обновим содержимое до текущих часов, минут и секунд, используя «.innerHTML=» ««.
document.getElementById('hours').innerHTML = hrs;
document.getElementById('minutes').innerHTML = min;
document.getElementById('seconds').innerHTML = seconds;
document.getElementById("session").innerHTML = session;
Теперь мы вызовем функцию с помощью setInterval().
setInterval(displayTime, 10);
Этот код использует метод setInterval() для многократного вызова функции displayTime с заданным интервалом в 10 миллисекунд.
Итак, вот полный код JS.
function displayTime(){
var dateTime = new Date();
var hrs = dateTime.getHours();
var min = dateTime.getMinutes();
var seconds = dateTime.getSeconds();
var session = "AM";
if(hrs >= 12){
session = "PM";
if (hrs > 12) {
hrs = hrs - 12;
}
}
if(hrs == 0){
hrs = 12;
}
if(min < 10) {
min = "0" + min;
}
if(seconds < 10) {
seconds = "0" + seconds;
}
document.getElementById('hours').innerHTML = hrs;
document.getElementById('minutes').innerHTML = min;
document.getElementById('seconds').innerHTML = seconds;
document.getElementById("session").innerHTML = session;
}
setInterval(displayTime, 10);
Ссылка на КодПен:
https://codepen.io/venky-17__/pen/PodxZgQ
Я надеюсь, что это поможет вам создать цифровые часы и понять их код. Спасибо.
