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.

<!DOCTYPE html>
<html>
<head>
	<meta charset="utf-8" />
	<meta name="viewport" content="width=device-width, initial-scale=1.0">
	<title>ANALOG CLOCK</title>
	<style>
		body {
			background-color: midnightblue;
			display: flex;
			justify-content: center;
			align-items: center;
			min-height: 100vh;
		}
		.clock {
			position: relative;
			overflow: hidden;
			background-color: inherit;
			height: 75vmin;
			width: 75vmin;
			border-radius: 50%;
			box-shadow: 0 -12px 12px rgba(255,255,255,.1),
						inset 0 -12px 12px rgba(255,255,255,.1),
						0 12px 12px rgba(0,0,0,.1),
						inset 0 12px 12px rgba(0,0,0,.1);
		}
			.clock div {
				position: absolute;
				top: 0;
				left: 0;
				height: 100%;
				width: 100%;
				background-color: transparent;
			}
				.clock div div {
					left: 50%;
					width: 0;
				}
			.clock span {
				position: absolute;
				font-family: Arial;
				font-size: 5vmin;
				font-weight: bold;
				color: lime;
			}
			.clock .h12 {
				left: 50%;
				top: 3%;
				transform: translateX(-50%);
			}
			.clock .h12::before {
				content: "12";
			}
			.clock .h3 {
				left: 97%;
				top: 50%;
				transform: translate(-100%, -50%);
			}
			.clock .h3::before {
				content: "3";
			}
			.clock .h6 {
				left: 50%;
				top: 97%;
				transform: translate(-50%, -100%);
			}
			.clock .h6::before {
				content: "6";
			}
			.clock .h9 {
				left: 3%;
				top: 50%;
				transform: translateY(-50%);
			}
			.clock .h9::before {
				content: "9";
			}
			.clock .ctr {
				width: 3%;
				height: 3%;
				border-radius: 50%;
				left: 50%;
				top: 50%;
				transform: translate(-50%, -50%);
				background-color: wheat;
			}

		#div-hour div {
			top: 20%;
			height: 30%;
			border-left: 3px solid wheat;
			margin-left: -1px;
		}

		#div-minute div {
			top: 10%;
			height: 40%;
			border-left: 3px solid wheat;
			margin-left: -1px;
		}

		#div-second div {
			top: 5%;
			height: 65%;
			border-left: 2px solid red;
		}
	</style>
	<script type="text/javascript">
		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 class="h12"></span>
		<span class="h3"></span>
		<span class="h6"></span>
		<span class="h9"></span>
		<div id="div-hour"><div></div></div>
		<div id="div-minute"><div></div></div>
		<div id="div-second"><div></div></div>
		<span class="ctr"></span>
	</div>
</body>
</html>

Coding Video

https://youtu.be/cOMZivAqFZE


Cookies are simple text files stored on the user's computer. They are used for adding features and security to this site.
OK