articles » current » javascript » analog-clock

JavaScript: Analog Clock

Scalable analog clock made with HTML, CSS and JavaScript; no images required

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


This site uses cookies. Cookies are simple text files stored on the user's computer. They are used for adding features and security to this site. Read the privacy policy.
CLOSE