<!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>
0 Comments