Working Analog Clock Using Html5, CSS3 & Javascript

In this video we will show you how to create Analog Clock working with CSS3 and Javascripts. You can see demo and download source code via below mentioned buttons.

Demo Download

Steps to create Working Analog Clock using CSS3 & Javascripts

To create working analog clock, we need to follow the below all steps

  1. Write an HTML
  2. Write CSS
  3. Javascripts

1. Write an HTML Markup

First we need to create an index.html file and paste the following HTML markup in it.

<!--
Author: TesWesM
Website: https://teswesm.com/
-->
<!DOCTYPE html>
<html>
<head>
	<meta charset="utf-8">
	<title>Javascripts Clock</title>
	<link rel="stylesheet" href="style.css">
</head>
<body>
	<div class="clock">
		<div class="hour">
			<div class="hr" id="hr"></div>
		</div>
		<div class="min">
			<div class="mn" id="mn"></div>
		</div>
		<div class="sec">
			<div class="sc" id="sc"></div>
		</div>
	</div>
</body>
</html>

As you can see above code we connected to style.css file in head tag and create some div in body section. You can direct copy code from here or get from download source code.

2. Write CSS

Now we need to Style our animation, paste the following styles in CSS either in head section or you can also include external style sheet.

/*
Author: TesWesM
Website: https://teswesm.com/
*/
*
{
	margin: 0;
	padding: 0;
	box-sizing: border-box;
}
body {
	display: flex;
	justify-content: center;
	align-items: center;
	min-height: 100vh;
	background: #68a4ff;
}
.clock {
	width: 350px;
	height: 350px;
	display: flex;
	justify-content: center;
	align-items: center;
	background: #fff url(clock.png);
	background-size: cover;
	border-radius: 50%;
	border: 20px solid #fff;
	box-shadow: inset 0 0 30px rgba(0, 0, 0, .1),
				0 20px 20px rgba(0,0,0,.2),
				0 0 0 4px rgba(255,255,255,1);
}
.clock::before {
	content: '';
	position: absolute;
	width: 15px;
	height: 15px;
	background: #848484;
	border: 2px solid #fff;
	z-index: 100000;
	border-radius: 50%;
}
.hour, .min, .sec {
	position: absolute;
}
.hour, .hr {
	width: 160px;
	height: 160px;
}
.min, .mn {
	width: 190px;
	height: 190px;
}
.sec, .sc {
	width: 230px;
	height: 230px;
}
.hr,.mn,.sc {
	display: flex;
	justify-content: center;
	position: absolute;
	border-radius: 50%;
}
.hr::before {
	content: '';
	position: absolute;
	width: 8px;
	height: 80px;
	background: #848484;
	z-index: 10;
	border-radius: 6px 6px 0 0;
}
.mn::before {
	content: '';
	position: absolute;
	width: 4px;
	height: 90px;
	background: #d6d6d6;
	z-index: 11;
	border-radius: 6px 6px 0 0;
}
.sc::before {
	content: '';
	position: absolute;
	width: 2px;
	height: 150px;
	background: #ff6767;
	z-index: 12;
	border-radius: 6px 6px 0 0;
}

As you can see above CSS coding here we use all classes to display stylish for Analog clock, you just a copy above code and paste in css file.

3. Write Javascripts

Now we need to javascripts for our analog clock, copy the following code and paste in HTML file in end of body section.

<script type="text/javascript">
	const deg = 6;
	const hr = document.querySelector("#hr");
	const mn = document.querySelector("#mn");
	const sc = document.querySelector("#sc");
	setInterval(() => {
		let day = new Date();
		let hh = day.getHours() * 30;
		let mm = day.getMinutes() * deg;
		let ss = day.getSeconds() * deg;
		hr.style.transform = `rotateZ(${hh+(mm/12)}deg)`;
		mn.style.transform = `rotateZ(${mm}deg)`;
		sc.style.transform = `rotateZ(${ss}deg)`;
	})
</script>

Above javascript code show time as per your machine.

Conclusion

Today we learnt how to create working analog clock using CSS3 and Javascript, you can add multiple clock on your individual pages.

If you found this tutorial helpful, share it with your friends and developers group.

Demo Download

I spent several hours to create this tutorial, if you want to say thanks so like my page on Facebook and share it.

Facebook Official Page: T-Code Scripts

Leave a Reply

Your email address will not be published. Required fields are marked *