- Files
- Index
- Style
- Script
- README
- CDN Add
PLEASE WAIT...
<!doctype html>
<html>
<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>My Time</title>
</head>
<body>
<div class="clock">
<div>
<span id="hour">00</span>
<span class="tempo">Hours</span>
</div>
<div>
<span id="minutes">00</span>
<span class="tempo">Minutes</span>
</div>
<div>
<span id="second">00</span>
<span class="tempo">Second</span>
</div>
</div>
</body>
</html>@import url('https://fonts.googleapis.com/css2?family=Open+Sans:wght@300;400;500&display=swap');
* {
margin: 0;
padding: 0;
font-family: 'Open Sans', sans-serif;
}
body{
height: 100vh;
background-image: url("https://diariodorio.com/wp-content/uploads/2011/08/Nascer-do-Sol-do-Rio-de-Janeiro-ate-Buenos-Aires.jpg") ;
display: flex;
align-items: center;
justify-content: center;
}
.clock{
display: flex;
align-items: center;
justify-content: space-around;
height: 200px;
width: 550px;
background:transparent;
border-radius:3px;
box-shadow: 0px 8px 10px rgba(0, 0, 0, .5);
}
.clock div{
height:170px;
width: 150px;
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
color: #3875ad;
background: rgba(5, 5, 5, .9);
box-shadow: 5px 5px 15px rgba(0, 0, 0, .7);
border-radius: 7px;
letter-spacing:3px;
}
.clock span{
font-size: 30px;
font-weight: bolder;
}
.clock span .tempo{
font-size:10px;
}const hour =document.getElementById('hour');
const minutes =document.getElementById('minutes');
const second =document.getElementById('second');
const clock= setInterval(function time(){
let dateToday= new Date();
let hr= dateToday.getHours();
let min=dateToday.getMinutes();
let s=dateToday.getSeconds();
hr = hr % 12;
if (hr<10) hr='0' +hr;
if (min<10) min='0'+min;
if (s<10) s ='0'+s;
hour.textContent = hr;
minutes.textContent = min;
second.textContent = s;
})