JavaScript Analog Clock jQuery Widget: Use CSS rotate the pointers of an analog clock

Recommend this page to a friend!
     
  Info   Example   Demos   View files Files   Download Download   Reputation   Support forum   Blog    
Ratings Unique User Downloads Download Rankings
StarStarStar 59%Total: 179 All time: 291 This week: 5Up
Version License JavaScript version Categories
analog-clock 1.0GNU General Publi...1.0Animation, HTML, jQuery, Time and Date
Description 

Author

Suresh Kumar

This object can render an analog clock rotating the pointers according to the current time.

It checks the current time and calculates the angle that the pointers of the hour, minute and second should be rotated to present the time like a regular analog clock.

Innovation Award
JavaScript Programming Innovation award nominee
April 2015
Number 5		 Displaying the current time may be useful to some Web applications.

This package can display a nice analog clock using CSS element rotation properties to show the clock pointers in the current time position.

Manuel Lemos
Picture of Suresh Kumar
Name: Suresh Kumar <contact>
Classes: 4 packages by
Country: India India
Age: ???
All time rank: 665 in India India
Week rank: 6 Up1 in India India Up
Innovation award
Innovation award
Nominee: 4x

Winner: 1x

Example

<html>
<head>
<title>Live Analog Clock using CSS and jQuery</title>
<link href="style.css" rel="stylesheet">
</head>
<body style="background-color: #673AB7;">
<div class="clock-circle">
  <div class="clock-face">
   <div id="hour" class="clock-hour"></div>
   <div id="minute" class="clock-minute"></div>
   <div id="second" class="clock-second"></div>
  </div>
</div>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.2/jquery.min.js"></script>
<script src="script.js"></script>
<script type="text/javascript">
jQuery(document).ready(function(){

var analogclock = new analogClock();

window.setInterval(function(){ 

analogclock.run(); 

}, 1000);

});
</script>
</body>
</html>

  Analog clock demoExternal page  

Open in a separate window

  Files folder image Files (4)  
File Role Description
Plain text file script.js Class Main script
Accessible without login Plain text file style.css Data clock style
Accessible without login HTML file example.html Doc. Example markup
Accessible without login Plain text file html_code.html Example html code example

Downloadanalog-clock-2015-04-12.zip 1KB
Downloadanalog-clock-2015-04-12.tar.gz 1KB
 Version Control Unique User Downloads Download Rankings  
 0%
Total:179
This week:0
All time:291
This week:5Up
User Ratings User Comments (1)
 All time
Utility:75%StarStarStarStar
Consistency:83%StarStarStarStarStar
Documentation:66%StarStarStarStar
Examples:75%StarStarStarStar
Tests:-
Videos:-
Overall:59%StarStarStar
Rank:39
 
Nice ! Congrat :)
9 years ago (Heirem)		62%StarStarStarStar
 

  Applications that use this package  
No pages of applications that use this class were specified.

Add link image If you know an application of this package, send a message to the author to add a link here.