Submit your widget

beautiful css3 and jQuery clock effect

Created 12 years ago   Views 15162   downloads 4429    Author tutorialpot
beautiful css3 and jQuery clock effect
View DemoDownload
Share |

We will simply create a clock image in photoshop and provide different images for each hand. A jQuery script will update the rotate position every 1000 millisecond, therefore creating a rotating effect on each of the three hands.

The technique

Have a self executing function that runs every 1000 millisecond.
Each hand has a background image, the background rotate property is updated every second.

The markup


Sadly there is nothing to see here

jQuery script


$(document).ready(function() {

	//markup for the clock
			var clock = [
<ul id="clock">',
<li id="date"></li>

<li id="seconds"></li>

<li id="hours"></li>

<li id="minutes"></li>



		//fadein the clock and append it to the body

			//an autoexecuting function that updates the clovk view every second
			//you can also use setInterval (function Clock (){})();
			(function Clock(){

		//get the date and time
              var date = new Date().getDate(),//get the current date
			   hours = new Date().getHours(),//get the current hour
               minutes = new Date().getMinutes();	//get the current minute
			   seconds = new Date().getSeconds(),//get the current second

              $("#date").html(date); //show the current date on the clock

			 var hrotate = hours * 30 + (minutes / 2);
			 //i.e 12 hours * 30 = 360 degrees

				  'transform'	:  'rotate('+ hrotate +'deg)',
				'-moz-transform'	:'rotate('+ hrotate +'deg)',
				'-webkit-transform'	:'rotate('+ hrotate +'deg)'

			  var mrotate = minutes * 6; //degrees to rotate the minute hand

				'transform'	:  'rotate('+ mrotate +'deg)',
				'-moz-transform'	:'rotate('+ mrotate +'deg)',
				'-webkit-transform'	:'rotate('+ mrotate +'deg)'

              var srotate = seconds * 6;//for the rotation to reach 360 degrees
			  //i.e 60 seconds * 6 = 360 degrees.

				 'transform'	:  'rotate('+ srotate +'deg)',
				'-moz-transform'	:'rotate('+ srotate +'deg)',
				'-webkit-transform'	:'rotate('+ srotate +'deg)'

             //a call to the clock function after every 1000 miliseconds

The markup is delivered by our script and appended to the body of our html with a fadeIn effect.
The rotate property of each hand is updated every second.
The clock also displays the current date.
The trivial part here may be the hrotate property:


var hrotate = hours * 30 + (minutes / 2);
Since rotation should be 360 degrees and there are 12 hours in an analog clock.
From the above breakdown take hours = 10 and minute = 0 giving a final of 300 degrees that the hour hand will have rotated.



	position: relative;
	width: 600px;
	height: 600px;
	list-style: none;
	margin: 20px auto;
	background: url('../images/clock.png') no-repeat center;

	position: absolute;
	width: 30px;
	height: 580px;
	left: 270px;
	text-shadow:1px 2px 1px #000;
	position: absolute;
	top: 365px;
	right: 140px;
	font:30px/36px Acens;
	background: url('../images/hands.png') no-repeat left;
	z-index: 1000;
	background: url('../images/hands.png') no-repeat center;
	z-index: 2000;

	background: url('../images/hands.png') no-repeat right;
	z-index: 3000;

A basic styling for the clock which is a background image and the hands which appear centered since the other half is invisible

Hope you find this clock useful

The article source:

Tag: clocks