Simple Analog Clock With jQuery And CSS3 - jsRapClock

jQuery jsRapClock is a simple, lightweight jQuery clock plugin which makes it easy to render a responsive Analog Clock on the web application using CSS3 2D transforms. No canvas and SVG used.

How to use it:

1. Create a container in which you want to render the analog clock.

<div id="demo"></div>

2. Download and insert the jQuery jsRapClock plugin's files after jQuery (slim build).

<link rel="stylesheet" href="/path/to/jsRapClock.css">
<script src="/path/to/cdn/jquery.slim.min.js"></script>
<script src="/path/to/jsRapClock.js"></script>

3. Call the function on document ready to render a default analog clock in the container.

$(function(){

  $('#demo').jsRapClock();

});

4. Add a caption to the analog clock.

$(function(){

  $('#demo').jsRapClock({
    caption: 'jQueryScript'
  });

});

5. Shift hours/minutes/seconds to create a world clock that supports any time zones.

$(function(){

  $('#demo').jsRapClock({
    shiftH: 1,
    shiftM: 30,
    shiftS:0
  });

});

6. Determine whether to show the numbers 1–12 inclusive on the face of your clock. Default: true.

$(function(){

  $('#demo').jsRapClock({
    clockNumbers: false
  });

});

7. Create a speaking clock that announces the current time at a specified time interval.

$(function(){

  $('#demo').jsRapClock({
    stopwatch: 10,
    pitch: 1.0, // Pitch of voice
    rate: 0.8, // Speed of voice
  });

});

Changelog:

2020-10-30

• Added more options

2020-10-27

• JS update

2019-12-11

• JS update

2019-05-17

• JS & CSS update

---

This awesome jQuery plugin is developed by Thibor. For more Advanced Usages, please check the demo page or visit the official website.