Creating A Local Time Clock Using jQuery and Canvas - canvasClock
File Size: | 1.39MB |
---|---|
Views Total: | 2251 |
Last Update: | |
Publish Date: | |
Official Website: | Go to website |
License: | MIT |
An easy and fast jQuery plugin used to create a local time clock using Html5 canvas
elements.
How to use it:
1. Create a clock container with data-bg-img-url
attribute to set the background image of the clock.
<div class="demo" data-bg-img-url="clock-face20.png"></div>
2. Load the jQuery javascript and jQuery canvasClock plugin at the bottom of your page.
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script> <script src="jquery.canvasClock.js"></script>
3. Call the plugin on the clock container.
<script type="text/javascript"> jQuery(document).ready(function(){ jQuery('.canvas-clock').canvasClock({ brandName: 'jQueryScript' }); }); </script>
4. Settings.
<script type="text/javascript"> jQuery(document).ready(function(){ jQuery('.canvas-clock').canvasClock({ brandName: 'jQueryScript', showSecondHand: true, showMinuteHand: true, showHourHand: true }); }); </script>
This awesome jQuery plugin is developed by harish86. For more Advanced Usages, please check the demo page or visit the official website.