<!DOCTYPE html>

<html lang="en">

<head>

<meta charset="UTF-8">

<meta name="viewport" content="width=device-width, initial-scale=1.0">

<title>Watch</title>

<style>

body{

width:100%;

height:100vh;

background: #000;

display: grid;

place-items:center;

overflow: hidden;

}

.watch{

width:850px;

height:250px;

border-radius:10px;

align-items: center;

justify-content: center;

display: flex;

box-shadow: rgba(255,255,255, 0.16) 0px 3px 6px, rgba(255,255,255, 0.23) 0px 3px 6px;

}

.a{

width:200px;

height:200px;

background:#000;

border-radius:50%;

float: left;

margin:4px;

color:white;

font-size:70px;

align-items: center;

justify-content: center;

display: flex;

animation: changebg 4s infinite;

transition: 0.4s;

box-shadow: rgba(255,255,255,0.4) 0px 30px 60px -12px inset, rgba(255, 255, 255, 0.7) 0px 18px 36px -18px inset;

}

@keyframes changebg {

0%{

background:red;

}50%{

background:#665667;

}100%{

background:#765640;

}

}

</style>

</head>

<body>

<div class="watch">

<div>

<div class="a" id="hour"></div>

<div class="a" id="minutes"></div>

<div class="a" id="second"></div>

<div class="a" id="day_night"></div>

</div>

</div>


<script>

setInterval(()=>{

let hour = document.getElementById('hour');

let minutes = document.getElementById('minutes');

let second = document.getElementById('second');

let day_night = document.getElementById('day_night');

let dn="AM";

let date = new Date();

let hours = date.getHours();

let Minutes = date.getMinutes();

let seconds = date.getSeconds();


if (hours>12) {

dn="PM";

hours=hours-12;

}

if (hours<10) {

hours="0"+hours;

}

if (Minutes<10) {

Minutes="0"+Minutes;

}

if (seconds<10) {

seconds="0"+seconds;

}


hour.innerHTML=hours;

minutes.innerHTML=Minutes;

second.innerHTML=seconds;

day_night.innerHTML=dn;


});

</script>

</body>

</html>