[_/_ SHONiR ANALOG CLOCK _/_]

Multiple Timezone Simple Analog Clock Using HTML , CSS And Javascript

This clock was created entirely with CSS. There were no images used. We created it using the most fundamental concept, which is easily understood by beginners.

The page’s structure was created with HTML and CSS, and the automatic time is retrieved with JavaScript.

The clock will change auto background color on early morning, daytime, evening time and nighttime.

JSDelivr CSS:

<link rel="stylesheet" href="https://cdn.jsdelivr.net/gh/shonirits/shonir-analog-clock@main/shonir-analog-clock/0.1/css/shonir_analog_clock.css" />

JSDelivr JS:

<script type="text/javascript" src="https://cdn.jsdelivr.net/gh/shonirits/shonir-analog-clock@main/shonir-analog-clock/0.1/js/shonir_analog_clock.js" ></script>

USE HTML CODE:

<div id="myfirstclockid" class="analog_clock">
<div>
<div class="info date"></div>
<div class="info time"></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="h_3">3</span>
<span class="h_6">6</span>
<span class="h_9">9</span>
<span class="h_12">12</span>
</div>
<div class="diallines"></div>
</div>

USE JAVASCRIPT CODE:

<script>
int_shonir_analog_clock("myfirstclockid", "Asia/Karachi");
</script>

INSTALL VIA NPM

npm i shonir-analog-clock

YOU CAN ADD MULTIPLE CLOCK AS MUCH AS YOU WISH ON SAME PAGE.

Codepen Preview Shonir Analog Clock using javascript poject

https://codepen.io/shonirits/pen/BaVjzGP

Official Website: www.shonir.com