Create Analog Clock With JQuery And CSS3 - JsRapClock Plugin

Today I am going to share awesome jQuery and CSS3 based jQuery plugin which help you to display an simple and beautiful analog clock on your website. 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 without canvas and SVG.

4.5/5.0
Last updated 09 September, 2022
By Admin

Libraries

Load the plugin’s CSS and JS library with jQuery core library.

<link rel="stylesheet" href="jsRapClock.css" />
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
<script src="jsRapClock.js"></script>

HTML

Create a simple DIV container where you want to render the analog clock.

<div id="clock" ></div>

$(function(){
  $('#clock').jsRapClock();
});

Use following option to customize analog clock.

$('#clock').jsRapClock({
	caption:'London',
	shiftH:1,
	shiftM:30
});

Jquery Plugin

Clock

Create Analog Clock With JQuery And CSS3 - JsRapClock Plugin

Categories