style.css
clock {
font-size: 175px;
width: 900px;
margin: 200px;
text-align: center;
border: 2px solid black;
border-radius: 20px;}
index.html
<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet" href="style.css">
</head>
<body>
<div id="clock">8:10:45</div>
<script>
setInterval(showTime, 1000);
function showTime() {
let time = new Date();
let hour = time.getHours();
let min = time.getMinutes();
let sec = time.getSeconds();
am_pm = "AM";
// Setting time for 12 Hrs format
if (hour >= 12) {
if (hour > 12) hour -= 12;
am_pm = "PM";
} else if (hour == 0) {
hr = 12;
am_pm = "AM";
}
hour =
hour < 10 ? "0" + hour : hour;
min = min < 10 ? "0" + min : min;
sec = sec < 10 ? "0" + sec : sec;
let currentTime =
hour +
":" +
min +
":" +
sec +
am_pm;
// Displaying the time
document.getElementById(
"clock"
).innerHTML = currentTime;
}
showTime();
</script>
</body>
</html>