Analog Clock with Pure HTML, CSS and JavaScript (no images)
This is a simple analog clock that uses no images. Everything is based on percentages, so it can be scaled to any size desired.
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>ANALOG CLOCK</title>
<style>
.clock {
position: relative;
background-color: #eee;
height: 500px;
width: 500px;
border-radius: 50%;
border: 1px solid black;
}
.clock div {
position: absolute;
top: 0;
left: 0;
height: 100%;
width: 100%;
}
.clock div div {
left: 50%;
}
.clock span {
position: absolute;
background-color: black;
width: 5%;
height: 5%;
border-radius: 50%;
}
.clock span:nth-child(1) {
left: 50%;
top: 0;
transform: translateX(-50%);
}
.clock span:nth-child(2) {
left: 0;
top: 50%;
transform: translateY(-50%);
}
.clock span:nth-child(3) {
left: 100%;
top: 50%;
transform: translate(-100%, -50%);
}
.clock span:nth-child(4) {
left: 50%;
top: 100%;
transform: translate(-50%, -100%);
}
#div-hour div {
top: 20%;
height: 30%;
border-left: 2px solid black;
margin-left: -1px;
}
#div-minute div {
top: 10%;
height: 40%;
border-left: 2px solid black;
margin-left: -1px;
}
#div-second div {
top: 5%;
height: 45%;
border-left: 1px solid red;
}
</style>
<script>
function setClock() {
var time = new Date();
var hd = 360.0 * time.getHours() / 12 + 30.0 * time.getMinutes() / 60;
var md = 360.0 * time.getMinutes() / 60 + 6.0 * time.getSeconds() / 60;
var sd = 360.0 * time.getSeconds() / 60 + 6.0 * time.getMilliseconds() / 1000;
document.getElementById("div-hour").style.transform = "rotate(" + hd + "deg)";
document.getElementById("div-minute").style.transform = "rotate(" + md + "deg)";
document.getElementById("div-second").style.transform = "rotate(" + sd + "deg)";
}
window.onload = function () {
setClock();
setInterval(function () {
setClock();
}, 10);
};
</script>
</head>
<body>
<div class="clock">
<span></span>
<span></span>
<span></span>
<span></span>
<div id="div-hour"><div></div></div>
<div id="div-minute"><div></div></div>
<div id="div-second"><div></div></div>
</div>
</body>
</html>