Clock Made With HTML,CSS and JAVASCRIPT
HTML
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
</head>
<body onload="startTime()">
<div class="clock">
<ul>
<li>
<span id="hours">00</span>
<span>:</span>
</li>
<li>
<span id="minutes">00</span>
<span>:</span>
</li>
<li>
<span id="seconds">00</span>
</li>
</ul>
</div>
</body>
</html>
CSS
html{
background-color: #3B444B;
background-position: center center;
background-repeat: no-repeat;
background-attachment: fixed;
background-size: cover;
text-transform: uppercase;
}
body{
text-align: center;
margin: 0;
}
.clock{
margin-top: 250px;
min-height: 300px;
}
ul{
display: block;
list-style: none;
}
.clock li{
display: inline-block;
margin-right: 3%;
text-align: center;
}
.clock li span{
color: #fff;
font-family: fantasy;
font-weight: bold;
font-size: 60px;
width: 150px;
letter-spacing: 8px;
}
.clock span:first-child{
margin-right: 40px;
}
JAVASCRIPT
function startTime() {
var today = new Date();
var h = today.getHours();
var m = today.getMinutes();
var s = today.getSeconds();
m = checkTime(m);
s = checkTime(s);
document.getElementById('hours').innerHTML = h;
document.getElementById('minutes').innerHTML = m;
document.getElementById('seconds').innerHTML = s;
var t = setTimeout(startTime, 500);
}
function checkTime(i) {
if (i < 10) {i = "0" + i};
return i;
}
