Simple Analog Clock With jQuery And CSS3 - jsRapClock
File Size: | 5.5 KB |
---|---|
Views Total: | 4382 |
Last Update: | |
Publish Date: | |
Official Website: | Go to website |
License: | MIT |

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.