Are you looking for an analog clock widget for your website? If yes then you are in the right place. Here I’m going to share a lightweight and easy-to-use analog clock HTML source code to implement on your website. Basically, this clock widget has been created using HTML, CSS, and JavaScript that comes with a decent interface to display day, date, and time.
The clock widget comes with three hands for hours, minutes, and seconds with real-time realistic movement. The interface of the clock is based on HTML elements (no SVG, canvas, or image) that can be easily customized with CSS.
How to Implement Analog Clock HTML Code to Your Website
1. Before getting started with this analog clock widget, you need to load Prefixfree CSS and Reset CSS by adding the following CDN links into the head tag of your website. The Google fonts CSS is optional, you can use any font family according to your needs.
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/meyer-reset/2.0/reset.min.css"> <link rel='stylesheet' href='https://fonts.googleapis.com/css?family=Poiret+One'> <script src="https://cdnjs.cloudflare.com/ajax/libs/prefixfree/1.0.7/prefixfree.min.js"></script>
2. After loading the necessary assets, create a div element with a class name "clock" and place div elements for the date, day, dots, hour, minutes, and seconds hands inside it. Similarly, create span elements for 3, 6, 9, and 12 hours and create a div element with a class name "daillines".
The following is the complete HTML structure for the analog clock. Copy and paste it where you want to display a clock widget on your website.
<div class="clock">
<div>
<div class="info date"></div>
<div class="info day"></div>
</div>
<div class="dot"></div>
<div>
<div class="hour-hand"></div>
<div class="minute-hand"></div>
<div class="second-hand"></div>
</div>
<div>
<span class="h3">3</span>
<span class="h6">6</span>
<span class="h9">9</span>
<span class="h12">12</span>
</div>
<div class="diallines"></div>
</div>
3, Now, add the following CSS to style the analog clock. You can set the custom values for the width and height properties if you want to resize the clock. Likewise, you can set the custom background color according to your website theme.
.clock {
background: #ececec;
width: 300px;
height: 300px;
margin: 8% auto 0;
border-radius: 50%;
border: 14px solid #333;
position: relative;
box-shadow: 0 2vw 4vw -1vw rgba(0,0,0,0.8);
}
.dot {
width: 14px;
height: 14px;
border-radius: 50%;
background: #ccc;
top: 0;
left: 0;
right: 0;
bottom: 0;
margin: auto;
position: absolute;
z-index: 10;
box-shadow: 0 2px 4px -1px black;
}
.hour-hand {
position: absolute;
z-index: 5;
width: 4px;
height: 65px;
background: #333;
top: 79px;
transform-origin: 50% 72px;
left: 50%;
margin-left: -2px;
border-top-left-radius: 50%;
border-top-right-radius: 50%;
}
.minute-hand {
position: absolute;
z-index: 6;
width: 4px;
height: 100px;
background: #666;
top: 46px;
left: 50%;
margin-left: -2px;
border-top-left-radius: 50%;
border-top-right-radius: 50%;
transform-origin: 50% 105px;
}
.second-hand {
position: absolute;
z-index: 7;
width: 2px;
height: 120px;
background: gold;
top: 26px;
lefT: 50%;
margin-left: -1px;
border-top-left-radius: 50%;
border-top-right-radius: 50%;
transform-origin: 50% 125px;
}
span {
display: inline-block;
position: absolute;
color: #333;
font-size: 22px;
font-family: 'Poiret One';
font-weight: 700;
z-index: 4;
}
.h12 {
top: 30px;
left: 50%;
margin-left: -9px;
}
.h3 {
top: 140px;
right: 30px;
}
.h6 {
bottom: 30px;
left: 50%;
margin-left: -5px;
}
.h9 {
left: 32px;
top: 140px;
}
.diallines {
position: absolute;
z-index: 2;
width: 2px;
height: 15px;
background: #666;
left: 50%;
margin-left: -1px;
transform-origin: 50% 150px;
}
.diallines:nth-of-type(5n) {
position: absolute;
z-index: 2;
width: 4px;
height: 25px;
background: #666;
left: 50%;
margin-left: -1px;
transform-origin: 50% 150px;
}
.info {
position: absolute;
width: 120px;
height: 20px;
border-radius: 7px;
background: #ccc;
text-align: center;
line-height: 20px;
color: #000;
font-size: 11px;
top: 200px;
left: 50%;
margin-left: -60px;
font-family: "Poiret One";
font-weight: 700;
z-index: 3;
letter-spacing: 3px;
margin-left: -60px;
left: 50%;
}
.date {
top: 80px;
}
.day {
top: 200px;
}
4. Finally, add the following JavaScript function between the <script> and </script> tag before closing the body tag.
var dialLines = document.getElementsByClassName('diallines');
var clockEl = document.getElementsByClassName('clock')[0];
for (var i = 1; i < 60; i++) {
clockEl.innerHTML += "<div class='diallines'></div>";
dialLines[i].style.transform = "rotate(" + 6 * i + "deg)";
}
function clock() {
var weekday = [
"Sunday",
"Monday",
"Tuesday",
"Wednesday",
"Thursday",
"Friday",
"Saturday"
],
d = new Date(),
h = d.getHours(),
m = d.getMinutes(),
s = d.getSeconds(),
date = d.getDate(),
month = d.getMonth() + 1,
year = d.getFullYear(),
hDeg = h * 30 + m * (360/720),
mDeg = m * 6 + s * (360/3600),
sDeg = s * 6,
hEl = document.querySelector('.hour-hand'),
mEl = document.querySelector('.minute-hand'),
sEl = document.querySelector('.second-hand'),
dateEl = document.querySelector('.date'),
dayEl = document.querySelector('.day');
var day = weekday[d.getDay()];
if(month < 9) {
month = "0" + month;
}
hEl.style.transform = "rotate("+hDeg+"deg)";
mEl.style.transform = "rotate("+mDeg+"deg)";
sEl.style.transform = "rotate("+sDeg+"deg)";
dateEl.innerHTML = date+"/"+month+"/"+year;
dayEl.innerHTML = day;
}
setInterval("clock()", 100);
That’s all! hopefully, you have successfully integrated this HTML analog clock widget code into your website. If you have any questions or suggestions, feel free to comment below.
