Multiple Timezone Analog Clocks – shonir-analog-clock

Preview:

Description:

Have you ever wanted many analog clocks on your website, showing the current local time of all the major cities in the world? If so, you can use the shonir-analog-clock library.

shonir-analog-clock is a tiny Javascript library that can be used to generate analog clock faces that display the time in multiple time zones.

How to use it:

1. Import the stylesheet shonir_analog_clock.css and JavaScript shonir_analog_clock.js.

<link rel="stylesheet" href="css/shonir_analog_clock.css">
<script src="js/shonir_analog_clock.js"></script>

2. Create world clocks using the int_shonir_analog_clock(id, time_zone) method.

<div id="New_York" 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>

int_shonir_analog_clock("New_York", "America/New_York");