Introduction
A digital clock is one type of equipment that utilizes digits to display the time being currently read in figures. Digital clocks are commonly used in numerous electronic appliances, such as computers, microwave ovens.
Source Code:
HTML:
<!DOCTYPE
html>
<html>
<head>
<title>
Digital Clock
</title>
<link rel="stylesheet" href="style.css"/>
</head>
<body>
<div
id="digital-clock"></div>
<script
src="script.js"></script>
</body>
</html>
CSS:
*
{
margin
:
0;
padding
:
0;
}
body
{
display
:
flex;
align-items
:
center;
background-image
:
url("clock.png");
background-repeat
:
no-repeat;
background-size
:
100% 100%;
height
:
100vh;
}
#digital-clock
{
font-family
:
Verdana, Geneva, Tahoma, sans-serif;
font-size
:
10vw;
color
:
black;
border
:
4px solid black;
border-radius
:
15px;
}
JavaScript:
function
updateClock() {
let date
=
new
Date();
let hours
= date.getHours();
let minutes
= date.getMinutes();
let seconds
= date.getSeconds();
let periods
= "AM";
if
(hours == 0)
{
hours =
12;
}
if
(hours > 12)
{
hours = hours -
12;
periods =
"PM";
}
hours = (hours < 10) ? "0" + hours : hours;
minutes = (minutes < 10) ? "0" + minutes : minutes;
seconds = (seconds < 10) ? "0" + seconds : seconds;
let time = hours + ":" + minutes + ":" + seconds + " " + periods;
document.getElementById("digital-clock").textContent = time;
setTimeout(updateClock, 1000);
}
updateClock();